Marionette.js CollectionView, display only specific models

Question

I am redesigning the Backbone.js application to use Marionette.js and I am trying to wrap my head around CollectionView .

Suppose I have several ItemView with a Cow model:

 // Declare my models. var Cow = Backbone.Model.extend({}); var Cows = Backbone.Collection.extend({ model: Cow }); // Make my views var GrassPatch = Marionette.ItemView.extend({ tagName: 'div', template: "<section class='grass'>{{name}}</section>", }) var Pasture = Marionette.CollectionView.extend({}); // Instantiate the CollectionView, var blissLand = new Pasture({ itemView: GrassPatch; }); // Now, add models to the collection. Cows.add({ name: 'Bessie', hasSpots: true }); Cows.add({ name: 'Frank', hasSpots: false }); 

Now here is the trick. I want only cows with spots on my pasture. How, when defining my CollectionView (Pasture), I say that it only draws attention to those models whose hasSpots === true ?

Ideally, I would like to have a CollectionView filter, which in all cases, but minimally, how do I display only some ItemViews based on their model properties?

UPDATE

I used David Sulc examples and it worked for a simple solution. Here is an example implementation:

  this.collection = Backbone.filterCollection(this.collection, function(criterion){ var len = String(criterion).length; var a = 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 the first three models 

Answer 1

As suggested by others, the best way to achieve this is to filter the collection so that it contains only the models you want to display and pass that assembly to the CollectionView collection for rendering.

Here you can see a working example: http://davidsulc.imtqy.com/marionette-gentle-introduction/#contacts Filter contacts with the input field in the upper right corner to display only models containing this text (for example, "li") .

This is achieved using a special collection type that handles filtering: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js

And it is created here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13

This code is from my puppet book .

Answer 2

Marionette handles this for you in v2.4.1.

See the CollectionView.filter method.

Below are the docs:

  var cv = new Marionette.CollectionView({ childView: SomeChildView, emptyView: SomeEmptyView, collection: new Backbone.Collection([ { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 } ]), // Only show views with even values filter: function (child, index, collection) { return child.get('value') % 2 === 0; } }); // renders the views with values '2' and '4' cv.render(); // change the filter cv.filter = function (child, index, collection) { return child.get('value') % 2 !== 0; }; // renders the views with values '1' and '3' cv.render(); // remove the filter // note that using `delete cv.filter` will cause the prototype filter to be used // which may be undesirable cv.filter = null; // renders all views cv.render(); 

Answer 3

@ M will be prompted to filter the collection - this is an appropriate way to do this.

Answer 4

Sometimes you can’t filter your collection because of some kind of user logic and you want these models to be in the collection, but you don’t want to be displayed. To do this, you can:

 var Pasture = Marionette.CollectionView.extend({ addChild: function(child, ChildView, index) { if(child.get('hasSpots')) { return Marionette.CollectionView.prototype.addChild.call(this, child, ChildView, index); } }}); 

Although I agree that filtering a collection is a much better way to do this.