Thorax Collection Views

by Jon Beebe

HTML

<script type="text/hbs" id="index-tpl">
    <h1>{{greeting}} {{location}}!</h1>
</script>

<script type="text/hbs" id="collection-tpl">
{{#collection tag="ul"}}
  <li>
    {{name}} &mdash; {{value}}
  </li>
{{else}}
  <li>No transactions.</li>
{{/collection}}
</script>

<script type="text/hbs" id="transaction-collection">
{{#collection tag="ul" id="transaction-list"}}{{/collection}}
</script>

<script type="text/hbs" id="transaction-item">
    {{name}} &mdash; {{value}}
</script>

JavaScript

var view = new Thorax.View({
    model: new Thorax.Model({
        greeting: 'hello',
        location: 'world!'
    }),
    template: Handlebars.compile($('#index-tpl').html())
});
view.appendTo('body');


var collection = new Thorax.Collection([{
    name: 'Ministry',
    value: '120.69'
},{
    name: 'Groceries',
    value: '89.44'
},{
    name: 'Auto Repair',
    value: '720.99'
}]); 

var collectionView = new Thorax.View({
    collection: collection,
    template: Handlebars.compile($('#collection-tpl').html())
});
collectionView.appendTo('body');

// -----

var TransactionItem = Thorax.View.extend({
    template: Handlebars.compile($('#transaction-item').html()),
    tagName: 'li'
});

var transactionCollectionView = new Thorax.CollectionView({
    collection: collection,
    template: Handlebars.compile($('#transaction-collection').html()),
    itemView: TransactionItem
});
transactionCollectionView.appendTo('body');

// -----

var transactionCollectionView2 = new Thorax.CollectionView({
    collection: collection,
    itemTemplate: Handlebars.compile($('#transaction-item').html()),
});
transactionCollectionView2.appendTo('body');