javascript - Marionette.js CollectionView, only render specific models -
i refactoring backbone.js application use marionette.js, , trying wrap head around collectionview
.
suppose have several itemview
s model cow
:
// declare models. var cow = backbone.model.extend({}); var cows = backbone.collection.extend({ model: cow }); // make views var grasspatch = marionette.itemview.extend({ tagname: 'div', template: "<section class='grass'>{{name}}</section>", }) var pasture = marionette.collectionview.extend({}); // instantiate collectionview, var blissland = new pasture({ itemview: grasspatch; }); // now, add models collection. cows.add({ name: 'bessie', hasspots: true }); cows.add({ name: 'frank', hasspots: false });
now here's trick. want cows spots in pasture. how, in defining collectionview (pasture), tell pay attention models hasspots
=== true
?
ideally have collectionview filter in events, minimally, how render itemviews based on model properties?
update
i used david sulc's examples , worked out easy solution. here's example implementation:
this.collection = backbone.filtercollection(this.collection, function(criterion){ var len = string(criterion).length; var = criterion.tolowercase(); return function(model){ var b = string(model.get('name')).substr(0, len).tolowercase(); if (a === b) { return model; } }; }); this.collection.add({ name: 'foo' }); this.collection.add({ name: 'foosball' }); this.collection.add({ name: 'foo bar' }); this.collection.add({ name: 'goats' }); this.collection.add({ name: 'cows' }); this.collection.filter('foo'); // -> returns first 3 models
as suggested others, best way achieve filter collection contain models want display, , pass fitlered collection collectionview rendering.
you can see working example here: http://davidsulc.github.io/marionette-gentle-introduction/#contacts filter contacts input field on top right display models containing text (e.g. "li").
this achieved using special collection type handles filtering: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js
and gets instantiated here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#l13
this code book on marionette.
Comments
Post a Comment