ezarowny/filtertodo.js

## filtertodo.js
<!DOCTYPE html>
<html>
<head>
    <title>ToDo or NotToDo</title>

    <!-- jQuery + Underscore + Backbone + Marionette -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.min.js'></script>
</head>

<body>
    <h1>ToDo or NotToDo</h1>

    <div id="put-lists-here"></div>
    &nbsp;
    <div id="put-todos-here"></div>

    <script type="text/html" id="todo-item">
        <%= title %>
    </script>

    <script type="text/html" id="list-item">
        <%= title %>
    </script>

    <script type="text/javascript">
        // ToDo Stuff
        var ToDo = Backbone.Model.extend({});

        var ToDos = Backbone.Collection.extend({
            model: ToDo
        });

        var ToDoView = Backbone.Marionette.ItemView.extend({
            tagName: 'li',
            template: Backbone.Marionette.TemplateCache.get("#todo-item")
        });

        var ToDosView = Backbone.Marionette.CollectionView.extend({
            tagName: 'ul',
            childView: ToDoView
        });

        // List Stuff

        var List = Backbone.Model.extend({});

        var Lists = Backbone.Collection.extend({
            model: List
        });

        var ListView = Backbone.Marionette.ItemView.extend({
            tagName: 'li',
            template: Backbone.Marionette.TemplateCache.get("#list-item"),

            events: {
                'click': 'triggerListChange'
            },

            triggerListChange: function() {
                Backbone.trigger('list:change', this.model.id);
            }
        });

        var ListsView = Backbone.Marionette.CollectionView.extend({
            tagName: 'ul',
            childView: ListView
        });

        // filtering collection
        // https://github.com/marionettejs/backbone.marionette/issues/183#issuecomment-22462406

        function FilteredCollection(original){
            var filtered = new original.constructor();

            // allow this object to have it's own events
            filtered._callbacks = {};

            // call 'where' on the original function so that
            // filtering will happen from the complete collection
            filtered.where = function(criteria){
                var items;

                // call 'where' if we have criteria
                // or just get all the models if we don't
                if (criteria){
                    items = original.where(criteria);
                } else {
                    items = original.models;
                }

                // store current criteria
                filtered._currentCriteria = criteria;

                // reset the filtered collection with the new items
                filtered.reset(items);
            };


            // when the original collection is reset,
            // the filtered collection will re-filter itself
            // and end up with the new filtered result set
            original.on("reset", function(){
                filtered.where(filtered._currentCriteria);
            });

            return filtered;
        }

        // initializing collections
        var toDos = new ToDos([
            {'done': false, 'list': 1, 'title': 'I am Ignio Montoya.'},
            {'done': false, 'list': 2, 'title': 'You killed my father, prepare to die!'},
            {'done': true, 'list': 1, 'title': 'Inconceivable!'}
        ]);
        var filtered = FilteredCollection(toDos);
        filtered.where({'list': 1});

        var lists = new Lists([
            {'id': 1, 'title': 'A List!'},
            {'id': 2, 'title': 'Yet Another List!'}
        ]);

        // initializing collection views
        var toDosView = new ToDosView({
            collection: filtered,
            el: '#put-todos-here'
        });

        var listsView = new ListsView({
            collection: lists,
            el: "#put-lists-here"
        });

        listsView.render();
        toDosView.render();

        // This is lazy, really lazy.
        Backbone.on('list:change', function(listId) {
            filtered.where({'list': listId});
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>ToDo or NotToDo</title>

	<!-- jQuery + Underscore + Backbone + Marionette -->
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.min.js'></script>
	</head>

	<body>
	<h1>ToDo or NotToDo</h1>

	<div id="put-lists-here"></div>

	<div id="put-todos-here"></div>

	<script type="text/html" id="todo-item">
	<%= title %>
	</script>

	<script type="text/html" id="list-item">
	<%= title %>
	</script>

	<script type="text/javascript">
	// ToDo Stuff
	var ToDo = Backbone.Model.extend({});

	var ToDos = Backbone.Collection.extend({
	model: ToDo
	});

	var ToDoView = Backbone.Marionette.ItemView.extend({
	tagName: 'li',
	template: Backbone.Marionette.TemplateCache.get("#todo-item")
	});

	var ToDosView = Backbone.Marionette.CollectionView.extend({
	tagName: 'ul',
	childView: ToDoView
	});

	// List Stuff

	var List = Backbone.Model.extend({});

	var Lists = Backbone.Collection.extend({
	model: List
	});

	var ListView = Backbone.Marionette.ItemView.extend({
	tagName: 'li',
	template: Backbone.Marionette.TemplateCache.get("#list-item"),

	events: {
	'click': 'triggerListChange'
	},

	triggerListChange: function() {
	Backbone.trigger('list:change', this.model.id);
	}
	});

	var ListsView = Backbone.Marionette.CollectionView.extend({
	tagName: 'ul',
	childView: ListView
	});

	// filtering collection
	// https://github.com/marionettejs/backbone.marionette/issues/183#issuecomment-22462406

	function FilteredCollection(original){
	var filtered = new original.constructor();

	// allow this object to have it's own events
	filtered._callbacks = {};

	// call 'where' on the original function so that
	// filtering will happen from the complete collection
	filtered.where = function(criteria){
	var items;

	// call 'where' if we have criteria
	// or just get all the models if we don't
	if (criteria){
	items = original.where(criteria);
	} else {
	items = original.models;
	}

	// store current criteria
	filtered._currentCriteria = criteria;

	// reset the filtered collection with the new items
	filtered.reset(items);
	};


	// when the original collection is reset,
	// the filtered collection will re-filter itself
	// and end up with the new filtered result set
	original.on("reset", function(){
	filtered.where(filtered._currentCriteria);
	});

	return filtered;
	}

	// initializing collections
	var toDos = new ToDos([
	{'done': false, 'list': 1, 'title': 'I am Ignio Montoya.'},
	{'done': false, 'list': 2, 'title': 'You killed my father, prepare to die!'},
	{'done': true, 'list': 1, 'title': 'Inconceivable!'}
	]);
	var filtered = FilteredCollection(toDos);
	filtered.where({'list': 1});

	var lists = new Lists([
	{'id': 1, 'title': 'A List!'},
	{'id': 2, 'title': 'Yet Another List!'}
	]);

	// initializing collection views
	var toDosView = new ToDosView({
	collection: filtered,
	el: '#put-todos-here'
	});

	var listsView = new ListsView({
	collection: lists,
	el: "#put-lists-here"
	});

	listsView.render();
	toDosView.render();

	// This is lazy, really lazy.
	Backbone.on('list:change', function(listId) {
	filtered.where({'list': listId});
	});
	</script>
	</body>
	</html>