javascript - Display collection length in a view in Marionette.js -

i'm learning marionette.js , have scenario, app has:

app.addregions({     main: '#omen',     newitem: '#addnewitem',     counter: '#counter' }); 

these regions. have these model/collections:

var item = backbone.model.extend(), items = backbone.collection.extend({     model: item,     url: 'api/items' }), 

i have item view , items view:

itemview = mn.itemview.extend({     tagname: 'tr',     template: '#itemview',     events: {         'click #btndeletebook' : 'deleteitem'     },     deleteitem: function() {         app.trigger('item:delete', this.model);     } }), itemsview = mn.collectionview.extend({     tagname: 'table',     childview: itemview,     onshow: function(view) {         tweenmax.staggerfrom($(view).find('td'), 1, {             x: 100         }, 2);     } }), 

i have initializer function, listens events above , stuff through app.itemcontroller. works fine.

but want add region (counter region), displays total number of items in collection. need separate view ideally, because displaying in different places.

so this:

displaycounter = mn.itemview.extend({     template: _.template('total: '+ app.items.length), }), 

app.items instance of collection declared above. before instantiation of displaycounter, error:

uncaught typeerror: cannot read property 'length' of undefined.

please help... :(

------------------------- e d t ----------------------

i've achieved it, seems complicated such tiny thing.

changed collection so:

items = backbone.collection.extend({         model: item,         url: 'api/items',         initialize: function() {             this.listento(this, 'add', function() {                 app.trigger('collection:updated', this);             });         }     }), 

and changed displaycounter this:

displaycounter = mn.itemview.extend({         template: _.template('total: <%=length%>'),         templatehelpers: function() {             return {                 length: this.lengthvariable || 0             }         },         initialize: function() {             app.on('collection:updated', function(params){                 this.lengthvariable = params.length;                 this.render();             }.bind(this));         }     }), 

i can't believe there's no easier way this.. :/

the code sets displaycounter being run before code puts instance of items app.items.

even if avoided problem assigning app.items first, you'd still have problem - template property set once you'd ever see length of app.items @ time define displaycounter.

rather hard-coding value directly template string, should supply value @ render time. mn.view.serializedata allows customise data passed template function @ render time:

displaycounter = mn.itemview.extend({   template: _.template('total:: <%= itemcount %>),    serializedata: function() {     return { itemcount: app.items.length }   } }),