marionette.templateview
v1.4.1
Published
TemplateView introduces a few efficiencies for working with views and templates.
Downloads
7
Maintainers
howardroarkReadme
Develop
$ npm install
$ npm startMarionette.TemplateView
TemplateView is a development sandbox which offers template designers more control over user experience outside of the core codebase. It is built around the use of inline templates as a means of contextual and efficient prototyping. In terms of working with Backbone/Marionette this extension is essentially ItemView and CollectionView merged together with added functionality to drive design workflow via inline templates.
Example
Input
<html>
<head>
<title>TempalteView</title>
</head>
<body>
<script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="vendor/underscore/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/backbone.js"></script>
<script type="text/javascript" src="vendor/backbone.marionette/lib/backbone.marionette.js"></script>
<script type="text/javascript" src="vendor/morphdom/dist/morphdom-umd.js"></script>
<script type="text/javascript" src="marionette.templateview.js"></script>
<script type="text/template" data-append-to="body" data-child-append-to="& ul" id="collectionViewTemplate">
<div class="container">
<ul></ul>
</div>
</script>
<script type="text/template" id="childViewTemplate">
<li>
<h3>Item: <%= title %></h3>
</li>
</script>
<script type="text/template" data-insert-after="& h3" id="childSubViewTemplate">
<p><%= desc %></p>
</script>
<script type="text/template" data-append-to="&" id="collectionSubViewTemplate">
<div>
<p>
Count: <b><%= collection.length %></b>
</p>
</div>
</script>
<script>
var Model = Backbone.Model.extend();
var Collection = Backbone.Collection.extend({
model: Model
});
var collection = new Collection([
{title: 'test1', desc:"This is the first item."},
{title: 'test2', desc:"This is the second item."}
]);
var ChildSubView = Marionette.TemplateView.extend({
template: "#childSubViewTemplate"
});
var ChildView = Marionette.TemplateView.extend({
template: "#childViewTemplate",
subViews: [ChildSubView]
});
var CollectionSubView = Marionette.TemplateView.extend({
template: "#collectionSubViewTemplate"
});
var CollectionView = Marionette.TemplateView.extend({
collection: collection,
childView: ChildView,
subViews: [CollectionSubView],
template: "#collectionViewTemplate"
});
var collectionView = new CollectionView();
collectionView.render();
</script>
</body>
</html>Output
<html>
<head>
<title>TempalteView</title>
</head>
<body>
...
<div class="container">
<ul>
<li>
<h3>Item: test1</h3>
<p>This is the first item.</p>
</li>
<li>
<h3>Item: test2</h3>
<p>This is the second item.</p>
</li>
</ul>
<div>
<p>
Count: <b>2</b>
</p>
</div>
</div>
</body>
</html>