Introduction to Marionette.js – The Backbone Framework/

...

/

Creating a New File for Collection

Creating a New File for Collection

Learn how to Implement the FilteredCollection functionality by applying a filtering criterion in a new file for our application's contacts.

We'll cover the following...

Let’s create a FilteredCollection object in our Entities module based on Derick Bailey’s code. Its role will be to manage and encapsulate the collection filtering we used in the “Filtering Contacts” chapter. When we instantiate a filtered collection, we’ll need to provide the base collection (containing all the models), as well as a filtering function, like this:

Press + to interact
var filteredContacts = new ContactManager.Entities.FilteredCollection({
  collection: contacts,
  filterFunction: function(filterCriterion){
    return function(contact){
      if(contact.get("firstName") === filterCriterion){
        return contact;
      }  
    }; 
  }
});

Steps to create a FilteredCollection

We need to follow the steps below to create our FilteredCollection:

Press + to interact
Flowchart for creating a FilteredCollection
Flowchart for creating a FilteredCollection

Let’s start by adding basic creation code to a new file:

Press + to interact
ContactManager.module("Entities", function(Entities, ContactManager,
Backbone, Marionette, $, _){
    Entities.FilteredCollection = function(options){
        var original = options.collection;
        var filtered = new original.constructor();
        filtered.add(original.models);
        filtered.filterFunction = options.filterFunction;
        return filtered;
    };
});

Explanation

  • Line 4: We store a reference to the original collection (containing all of the ...