collection.js

define([
  'text!templates/Collection.html',
  'app/State',
  'views/CriteriaItem',
  'mixins/views/error',
  'mixins/views/content',
  'mixins/views/filterCollection',
  'underscore'
], function(html, AppState, CriteriaItem, error, content, filterCollection,
  _) {
  'use strict';

  var template = _.template(html);

  var init = function(view, collection) {
    var views = view.views = {};

    collection.on('error', function() {
      view.trigger('error');
    });

    collection.on('reset', function() {
      collection.each(function(model) {
        views[model.id] = new CriteriaItem({ model: model });
      });
      view.render();
    });

  };
  
  var render = function(view) {
    view.$el.html(template());

    var ul = view.$el.find('ul');
    _(view.views).each(function(view) {
      ul.append(view.render().el);
    });
  };

  return function(proto) {

    proto.initialize = _.wrap(proto.initialize, function(ctor, options) {
      ctor.call(this, options);
      init(this, this.model.get('collection'));
    });

    proto.render = _.wrap(proto.render, function(func) {
      render(this);
      return func.call(this);
    });

    _([error, content, filterCollection]).each(function(mixin) {
      mixin(proto);
    });
  };
});

FilterBox.js

define([
  'text!templates/FilterBox.html',
  'backbone',
  'underscore'
], function(html, Backbone, _) {
  'use strict';

  var template = _.template(html);

  var View = Backbone.View.extend({
    tagName: 'form',

    events: {
      'keypress input': function(event) {
        if (event.which === 13) {
          event.preventDefault();
        }
      },
      'keyup input': function(event) {
        this.trigger('filter', this.text.val().toLowerCase());
      },
      'click .clear-search': function(event) {
        event.preventDefault();
        this.clear();
      }
    },

    clear: function() {
      this.trigger('clear');
      if (this.text) {
        this.text.val('');
        this.text.focus();
      }
    },

    render: function() {
      this.$el.html(template({ id: _.uniqueId('filter-') }));
      this.text = this.$el.find('input');
      return this;
    }
    
  });

  return View;
});

filterCollection.js

define([
  'views/FilterBox',
  'underscore'
], function(FilterBox, _) {
  'use strict';

  var init = function(view, collection) {
    var filterBox = view.filterBox = new FilterBox();
    view.model.on('clear', function() {
      filterBox.clear();
    });

    filterBox.on('filter', function(value) {
      var pattern = new RegExp(value, 'i');

      var allIds = collection.map(function(model) {
        return model.id;
      });

      var goodIds = collection.chain().filter(function(model) {
        return pattern.test(model.get('value'));
      }).map(function(model) {
        return model.id;
      });

      goodIds.each(function(id) {
        collection.get(id).unset('invisible');
      });

      collection.chain().map(function(model) {
        return model.id;
      }).difference(goodIds.value()).each(function(id) {
        collection.get(id).set('invisible', true);
      });
    });

    filterBox.on('clear', function() {
      collection.each(function(model) {
        model.unset('invisible');
      });
    });
  };

  var render = function(view) {
    view.$el.find('.filter-box').html(view.filterBox.render().el);
    view.filterBox.delegateEvents();
    return view;
  };

  return function(proto) {
    proto.initialize = _.wrap(proto.initialize, function(func, options) {
      func.call(this, options);
      init(this, this.model.get('collection'));
    });

    proto.render = _.wrap(proto.render, function(func) {
      func.call(this);
      return render(this);
    });
  };
});