Dynamic filtering of marionette collection models with user search

Question

I am trying to learn backbone marionette js and developing a small application using this framework.

As part of the application, i am displaying list of users in composite collection view with mode contains name as only attribute. Now i want to add a search button. When user enters string in search box, i want to filter names dynamically on keyup. If he clears the text, i should reset.

I tried to looking at event trigger and listening. But not able to exactly code in my case.

Can someone direct me how to listen to the events. SearchBox is outside this template. Is it possible to listen to events from outside view and do actions like filtering.

Below are my backbone model and collection view :

AttachmentModel = Backbone.Model.extend({
    defaults: {
        name : "DefaultName"
    }
});

//collection definition
AttachmentCollectionModel = Backbone.Collection.extend({
    model : AttachmentModel  
});

//View definition
AttachmentView = Backbone.Marionette.ItemView.extend({
    template : "#attachment-item-template",
    tagName : 'li'
});

//Collection view definition
AttachmentCollectionView = Backbone.Marionette.CompositeView.extend({
    tagName : "ul",
    className : "list",
    template : "#attachment-collection-template",
    itemView : AttachmentView
});

//Adding region
MyApp.addRegions({
    attachmentsDisplayContainer : "#attachmentsDisplayContainer"
});

//Adding initializer
MyApp.addInitializer(function(options){
    var attachmentCollectionView = new AttachmentCollectionView({
        collection : options.attachmentCollectionModels
    });
    MyApp.attachmentsDisplayContainer.show(attachmentCollectionView);    
});

Markinhos Markinhos · Accepted Answer · 2013-11-20T18:56:26

I have no experience with Marionette, but in your case I would create a SearchView that would control the search event. That SearchView would hold a reference to AttachmentCollectionView and for each keyEvent would call a method search(name) or similar. I don't think is a good idea to bind events outside the view template.

//SearchView

SearchView = Backbone.View.extend({
    events: {
       "onkeyup .searchField: filterResult"
    },
    initialize: function(options){
       this.attachmentCollectionView = options.attachmentCollectionView;
    },
    filterResult: function(e) {
      this.attachmentCollectionView.searchResult();
    }
});

AttachmentCollectionView = Backbone.Marionette.CompositeView.extend({
    tagName : "ul",
    className : "list",
    template : "#attachment-collection-template",
    itemView : AttachmentView,

    searchResult: function(name){
       //Filter your list view and update your view
    }
});

//Adding initializer
MyApp.addInitializer(function(options){
    var attachmentCollectionView = new AttachmentCollectionView({
        collection : options.attachmentCollectionModels
    });
    var searchView = new SearchView({
        attachmentCollectionView = attachmentCollectionView
    });

    MyApp.attachmentsDisplayContainer.show(attachmentCollectionView);    

    searchView.render();
});

Dynamic filtering of marionette collection models with user search

1 Answers