Chaplin-brunch: do real model-level filtering, get rid of stuff.

labs/dependency-examples/chaplin-brunch/app/application.coffee

 mediator = require 'mediator'
 Todos = require 'models/todos'
-Layout = require 'views/layout'
 
 # The application object
 module.exports = class Application extends Chaplin.Application
@@ -8,13 +7,6 @@ module.exports = class Application extends Chaplin.Application
   # “Controller title – Site title” (see Layout#adjustTitle)
   title: 'Chaplin • TodoMVC'
 
-  # Override standard layout initializer
-  # ------------------------------------
-  initLayout: ->
-    # Use an application-specific Layout class. Currently this adds
-    # no features to the standard Chaplin Layout, it’s an empty placeholder.
-    @layout = new Layout {@title}
-
   # Create additional mediator properties
   # -------------------------------------
   initMediator: ->
@@ -22,6 +14,8 @@ module.exports = class Application extends Chaplin.Application
     mediator.user = null
     # Add additional application-specific properties and methods
     mediator.todos = new Todos()
+    # If todos are fetched from server, we will need to wait
+    # for them.
     mediator.todos.fetch()
     # Seal the mediator
     super

labs/dependency-examples/chaplin-brunch/app/assets/index.html

@@ -9,7 +9,6 @@
   <!--[if IE]>
   <script src="../../../assets/ie.js"></script>
   <![endif]-->
-  <link rel="stylesheet" href="app.css">
   <script src="app.js"></script>
   <script>require('initialize');</script>
 </head>

labs/dependency-examples/chaplin-brunch/app/controllers/base/controller.coffee

-HeaderView = require 'views/header-view'
-FooterView = require 'views/footer-view'
-TodosView = require 'views/todos-view'
-mediator = require 'mediator'
-
-module.exports = class Controller extends Chaplin.Controller
-  beforeAction: ->
-    @compose 'footer', ->
-      params = collection: mediator.todos
-      @header = new HeaderView params
-      @footer = new FooterView params
-      @todos = new TodosView params

labs/dependency-examples/chaplin-brunch/app/controllers/index-controller.coffee

-Controller = require './base/controller'
+HeaderView = require 'views/header-view'
+FooterView = require 'views/footer-view'
+TodosView = require 'views/todos-view'
+mediator = require 'mediator'
 
-module.exports = class IndexController extends Controller
+module.exports = class IndexController extends Chaplin.Controller
+  # The method is executed before any controller actions.
+  # We compose structure in order for it to be rendered only once.
+  beforeAction: ->
+    @compose 'structure', ->
+      params = collection: mediator.todos
+      @header = new HeaderView params
+      @footer = new FooterView params
+
+  # On each new load, old @view will be disposed and
+  # new @view will be created. This is idiomatic Chaplin memory management:
+  # one controller per screen.
   list: (params) ->
-    @publishEvent 'todos:filter', params.filterer?.trim() ? 'all'
+    filterer = params.filterer?.trim() ? 'all'
+    @publishEvent 'todos:filter', filterer
+    @view = new TodosView collection: mediator.todos, filterer: (model) ->
+      switch filterer
+        when 'completed' then model.get('completed')
+        when 'active' then not model.get('completed')
+        else true

labs/dependency-examples/chaplin-brunch/app/initialize.coffee

@@ -4,4 +4,4 @@ routes = require 'routes'
 # Initialize the application on DOM ready event.
 $ ->
   new Application
-    controllerSuffix: '-controller', pushState: no, routes: routes
+    controllerSuffix: '-controller', pushState: false, routes: routes

labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee

-# Application-specific utilities
-# ------------------------------
-
-# Delegate to Chaplin’s utils module
-utils = Chaplin.utils.beget Chaplin.utils
-
-# _(utils).extend
-#  someMethod: ->
-
-module.exports = utils

labs/dependency-examples/chaplin-brunch/app/lib/view-helper.coffee

-mediator = require 'mediator'
-utils = require './utils'
-
-# Application-specific view helpers
-# ---------------------------------
-
-# http://handlebarsjs.com/#helpers
-
-# Conditional evaluation
-# ----------------------
-
-# Choose block by user login status
-Handlebars.registerHelper 'if_logged_in', (options) ->
-  if mediator.user
-    options.fn(this)
-  else
-    options.inverse(this)
-
-# Map helpers
-# -----------
-
-# Make 'with' behave a little more mustachey
-Handlebars.registerHelper 'with', (context, options) ->
-  if not context or Handlebars.Utils.isEmpty context
-    options.inverse(this)
-  else
-    options.fn(context)
-
-# Inverse for 'with'
-Handlebars.registerHelper 'without', (context, options) ->
-  inverse = options.inverse
-  options.inverse = options.fn
-  options.fn = inverse
-  Handlebars.helpers.with.call(this, context, options)
-
-# Evaluate block with context being current user
-Handlebars.registerHelper 'with_user', (options) ->
-  context = mediator.user?.serialize() or {}
-  Handlebars.helpers.with.call(this, context, options)

labs/dependency-examples/chaplin-brunch/app/models/base/collection.coffee

-Model = require 'models/base/model'
-
-module.exports = class Collection extends Chaplin.Collection
-  # Use the project base model per default, not Chaplin.Model
-  model: Model
-
-  # Mixin a synchronization state machine
-  # _(@prototype).extend Chaplin.SyncMachine

labs/dependency-examples/chaplin-brunch/app/models/base/model.coffee

-module.exports = class Model extends Chaplin.Model
-  # Mixin a synchronization state machine
-  # _(@prototype).extend Chaplin.SyncMachine

labs/dependency-examples/chaplin-brunch/app/models/todo.coffee

-Model = require 'models/base/model'
-
-module.exports = class Todo extends Model
+# It is a very good idea to have base Model / Collection
+# e.g. Model = require 'models/base/model'
+# But in this particular app since we only have one
+# model type, we will inherit directly from Chaplin Model.
+module.exports = class Todo extends Chaplin.Model
   defaults:
     title: ''
     completed: no

labs/dependency-examples/chaplin-brunch/app/models/todos.coffee

-Collection = require 'models/base/collection'
 Todo = require 'models/todo'
 
-module.exports = class Todos extends Collection
+module.exports = class Todos extends Chaplin.Collection
   model: Todo
   localStorage: new Store 'todos-chaplin'
 

labs/dependency-examples/chaplin-brunch/app/views/base/collection-view.coffee

@@ -4,3 +4,4 @@ module.exports = class CollectionView extends Chaplin.CollectionView
   # This class doesn’t inherit from the application-specific View class,
   # so we need to borrow the method from the View prototype:
   getTemplateFunction: View::getTemplateFunction
+  useCssAnimation: true

labs/dependency-examples/chaplin-brunch/app/views/base/view.coffee

-require 'lib/view-helper' # Just load the view helpers, no return value
-
 module.exports = class View extends Chaplin.View
   # Precompiled templates function initializer.
   getTemplateFunction: ->

labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee

-View = require 'views/base/view'
-template = require 'views/templates/footer'
+View = require './base/view'
+template = require './templates/footer'
 
 module.exports = class FooterView extends View
-  autoRender: yes
+  autoRender: true
   el: '#footer'
   events:
     'click #clear-completed': 'clearCompleted'
@@ -16,7 +16,6 @@ module.exports = class FooterView extends View
     @renderCounter()
 
   updateFilterer: (filterer) ->
-    console.log 'updateFilterer'
     filterer = '' if filterer is 'all'
     @$('#filters a')
       .removeClass('selected')

labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee

-View = require 'views/base/view'
-template = require 'views/templates/header'
+View = require './base/view'
+template = require './templates/header'
 
 module.exports = class HeaderView extends View
-  autoRender: yes
+  autoRender: true
   el: '#header'
   events:
     'keypress #new-todo': 'createOnEnter'

labs/dependency-examples/chaplin-brunch/app/views/layout.coffee

-# Layout is the top-level application ‘view’.
-module.exports = class Layout extends Chaplin.Layout
-  listen:
-    'todos:filter mediator': 'changeFilterer'
-
-  changeFilterer: (filterer = 'all') ->
-    $('#todoapp').attr 'class', "filter-#{filterer}"

labs/dependency-examples/chaplin-brunch/app/views/todo-view.coffee

-View = require 'views/base/view'
-template = require 'views/templates/todo'
+View = require './base/view'
+template = require './templates/todo'
 
 module.exports = class TodoView extends View
   events:
@@ -15,12 +15,6 @@ module.exports = class TodoView extends View
   template: template
   tagName: 'li'
 
-  render: =>
-    super
-    # Reset classes, re-add the appropriate ones.
-    @$el.removeClass 'active completed'
-    @$el.toggle @model.get('completed')
-
   destroy: =>
     @model.destroy()
 

labs/dependency-examples/chaplin-brunch/app/views/todos-view.coffee

-CollectionView = require 'views/base/collection-view'
-template = require 'views/templates/todos'
-TodoView = require 'views/todo-view'
+CollectionView = require './base/collection-view'
+template = require './templates/todos'
+TodoView = require './todo-view'
 
 module.exports = class TodosView extends CollectionView
-  el: '#main'
+  container: '#main'
   events:
     'click #toggle-all': 'toggleCompleted'
   itemView: TodoView

labs/dependency-examples/chaplin-brunch/public/app.js

@@ -14841,7 +14841,7 @@ Handlebars.template = Handlebars.VM.template;
 ;
 
 require.register("application", function(exports, require, module) {
-var Application, Layout, Todos, mediator, _ref,
+var Application, Todos, mediator, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -14849,8 +14849,6 @@ mediator = require('mediator');
 
 Todos = require('models/todos');
 
-Layout = require('views/layout');
-
 module.exports = Application = (function(_super) {
   __extends(Application, _super);
 
@@ -14861,12 +14859,6 @@ module.exports = Application = (function(_super) {
 
   Application.prototype.title = 'Chaplin • TodoMVC';
 
-  Application.prototype.initLayout = function() {
-    return this.layout = new Layout({
-      title: this.title
-    });
-  };
-
   Application.prototype.initMediator = function() {
     mediator.user = null;
     mediator.todos = new Todos();
@@ -14879,8 +14871,8 @@ module.exports = Application = (function(_super) {
 })(Chaplin.Application);
 });
 
-require.register("controllers/base/controller", function(exports, require, module) {
-var Controller, FooterView, HeaderView, TodosView, mediator, _ref,
+require.register("controllers/index-controller", function(exports, require, module) {
+var FooterView, HeaderView, IndexController, TodosView, mediator, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -14892,54 +14884,47 @@ TodosView = require('views/todos-view');
 
 mediator = require('mediator');
 
-module.exports = Controller = (function(_super) {
-  __extends(Controller, _super);
+module.exports = IndexController = (function(_super) {
+  __extends(IndexController, _super);
 
-  function Controller() {
-    _ref = Controller.__super__.constructor.apply(this, arguments);
+  function IndexController() {
+    _ref = IndexController.__super__.constructor.apply(this, arguments);
     return _ref;
   }
 
-  Controller.prototype.beforeAction = function() {
-    return this.compose('footer', function() {
+  IndexController.prototype.beforeAction = function() {
+    return this.compose('structure', function() {
       var params;
       params = {
         collection: mediator.todos
       };
       this.header = new HeaderView(params);
-      this.footer = new FooterView(params);
-      return this.todos = new TodosView(params);
+      return this.footer = new FooterView(params);
     });
   };
 
-  return Controller;
-
-})(Chaplin.Controller);
-});
-
-require.register("controllers/index-controller", function(exports, require, module) {
-var Controller, IndexController, _ref,
-  __hasProp = {}.hasOwnProperty,
-  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-Controller = require('./base/controller');
-
-module.exports = IndexController = (function(_super) {
-  __extends(IndexController, _super);
-
-  function IndexController() {
-    _ref = IndexController.__super__.constructor.apply(this, arguments);
-    return _ref;
-  }
-
   IndexController.prototype.list = function(params) {
-    var _ref1, _ref2;
-    return this.publishEvent('todos:filter', (_ref1 = (_ref2 = params.filterer) != null ? _ref2.trim() : void 0) != null ? _ref1 : 'all');
+    var filterer, _ref1, _ref2;
+    filterer = (_ref1 = (_ref2 = params.filterer) != null ? _ref2.trim() : void 0) != null ? _ref1 : 'all';
+    this.publishEvent('todos:filter', filterer);
+    return this.view = new TodosView({
+      collection: mediator.todos,
+      filterer: function(model) {
+        switch (filterer) {
+          case 'completed':
+            return model.get('completed');
+          case 'active':
+            return !model.get('completed');
+          default:
+            return true;
+        }
+      }
+    });
   };
 
   return IndexController;
 
-})(Controller);
+})(Chaplin.Controller);
 });
 
 require.register("initialize", function(exports, require, module) {
@@ -14958,103 +14943,15 @@ $(function() {
 });
 });
 
-require.register("lib/utils", function(exports, require, module) {
-var utils;
-
-utils = Chaplin.utils.beget(Chaplin.utils);
-
-module.exports = utils;
-});
-
-require.register("lib/view-helper", function(exports, require, module) {
-var mediator, utils;
-
-mediator = require('mediator');
-
-utils = require('./utils');
-
-Handlebars.registerHelper('if_logged_in', function(options) {
-  if (mediator.user) {
-    return options.fn(this);
-  } else {
-    return options.inverse(this);
-  }
-});
-
-Handlebars.registerHelper('with', function(context, options) {
-  if (!context || Handlebars.Utils.isEmpty(context)) {
-    return options.inverse(this);
-  } else {
-    return options.fn(context);
-  }
-});
-
-Handlebars.registerHelper('without', function(context, options) {
-  var inverse;
-  inverse = options.inverse;
-  options.inverse = options.fn;
-  options.fn = inverse;
-  return Handlebars.helpers["with"].call(this, context, options);
-});
-
-Handlebars.registerHelper('with_user', function(options) {
-  var context, _ref;
-  context = ((_ref = mediator.user) != null ? _ref.serialize() : void 0) || {};
-  return Handlebars.helpers["with"].call(this, context, options);
-});
-});
-
 require.register("mediator", function(exports, require, module) {
 module.exports = Chaplin.mediator;
 });
 
-require.register("models/base/collection", function(exports, require, module) {
-var Collection, Model, _ref,
-  __hasProp = {}.hasOwnProperty,
-  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-Model = require('models/base/model');
-
-module.exports = Collection = (function(_super) {
-  __extends(Collection, _super);
-
-  function Collection() {
-    _ref = Collection.__super__.constructor.apply(this, arguments);
-    return _ref;
-  }
-
-  Collection.prototype.model = Model;
-
-  return Collection;
-
-})(Chaplin.Collection);
-});
-
-require.register("models/base/model", function(exports, require, module) {
-var Model, _ref,
-  __hasProp = {}.hasOwnProperty,
-  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-module.exports = Model = (function(_super) {
-  __extends(Model, _super);
-
-  function Model() {
-    _ref = Model.__super__.constructor.apply(this, arguments);
-    return _ref;
-  }
-
-  return Model;
-
-})(Chaplin.Model);
-});
-
 require.register("models/todo", function(exports, require, module) {
-var Model, Todo, _ref,
+var Todo, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-Model = require('models/base/model');
-
 module.exports = Todo = (function(_super) {
   __extends(Todo, _super);
 
@@ -15088,16 +14985,14 @@ module.exports = Todo = (function(_super) {
 
   return Todo;
 
-})(Model);
+})(Chaplin.Model);
 });
 
 require.register("models/todos", function(exports, require, module) {
-var Collection, Todo, Todos, _ref,
+var Todo, Todos, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-Collection = require('models/base/collection');
-
 Todo = require('models/todo');
 
 module.exports = Todos = (function(_super) {
@@ -15134,7 +15029,7 @@ module.exports = Todos = (function(_super) {
 
   return Todos;
 
-})(Collection);
+})(Chaplin.Collection);
 });
 
 require.register("routes", function(exports, require, module) {
@@ -15161,6 +15056,8 @@ module.exports = CollectionView = (function(_super) {
 
   CollectionView.prototype.getTemplateFunction = View.prototype.getTemplateFunction;
 
+  CollectionView.prototype.useCssAnimation = true;
+
   return CollectionView;
 
 })(Chaplin.CollectionView);
@@ -15171,8 +15068,6 @@ var View, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-require('lib/view-helper');
-
 module.exports = View = (function(_super) {
   __extends(View, _super);
 
@@ -15195,9 +15090,9 @@ var FooterView, View, template, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-View = require('views/base/view');
+View = require('./base/view');
 
-template = require('views/templates/footer');
+template = require('./templates/footer');
 
 module.exports = FooterView = (function(_super) {
   __extends(FooterView, _super);
@@ -15228,7 +15123,6 @@ module.exports = FooterView = (function(_super) {
   };
 
   FooterView.prototype.updateFilterer = function(filterer) {
-    console.log('updateFilterer');
     if (filterer === 'all') {
       filterer = '';
     }
@@ -15263,9 +15157,9 @@ var HeaderView, View, template, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-View = require('views/base/view');
+View = require('./base/view');
 
-template = require('views/templates/header');
+template = require('./templates/header');
 
 module.exports = HeaderView = (function(_super) {
   __extends(HeaderView, _super);
@@ -15304,35 +15198,6 @@ module.exports = HeaderView = (function(_super) {
 })(View);
 });
 
-require.register("views/layout", function(exports, require, module) {
-var Layout, _ref,
-  __hasProp = {}.hasOwnProperty,
-  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-module.exports = Layout = (function(_super) {
-  __extends(Layout, _super);
-
-  function Layout() {
-    _ref = Layout.__super__.constructor.apply(this, arguments);
-    return _ref;
-  }
-
-  Layout.prototype.listen = {
-    'todos:filter mediator': 'changeFilterer'
-  };
-
-  Layout.prototype.changeFilterer = function(filterer) {
-    if (filterer == null) {
-      filterer = 'all';
-    }
-    return $('#todoapp').attr('class', "filter-" + filterer);
-  };
-
-  return Layout;
-
-})(Chaplin.Layout);
-});
-
 require.register("views/templates/footer", function(exports, require, module) {
 var __templateData = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
@@ -15436,9 +15301,9 @@ var TodoView, View, template, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-View = require('views/base/view');
+View = require('./base/view');
 
-template = require('views/templates/todo');
+template = require('./templates/todo');
 
 module.exports = TodoView = (function(_super) {
   __extends(TodoView, _super);
@@ -15448,7 +15313,6 @@ module.exports = TodoView = (function(_super) {
     this.edit = __bind(this.edit, this);
     this.toggle = __bind(this.toggle, this);
     this.destroy = __bind(this.destroy, this);
-    this.render = __bind(this.render, this);
     _ref = TodoView.__super__.constructor.apply(this, arguments);
     return _ref;
   }
@@ -15469,12 +15333,6 @@ module.exports = TodoView = (function(_super) {
 
   TodoView.prototype.tagName = 'li';
 
-  TodoView.prototype.render = function() {
-    TodoView.__super__.render.apply(this, arguments);
-    this.$el.removeClass('active completed');
-    return this.$el.toggle(this.model.get('completed'));
-  };
-
   TodoView.prototype.destroy = function() {
     return this.model.destroy();
   };
@@ -15515,11 +15373,11 @@ var CollectionView, TodoView, TodosView, template, _ref,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-CollectionView = require('views/base/collection-view');
+CollectionView = require('./base/collection-view');
 
-template = require('views/templates/todos');
+template = require('./templates/todos');
 
-TodoView = require('views/todo-view');
+TodoView = require('./todo-view');
 
 module.exports = TodosView = (function(_super) {
   __extends(TodosView, _super);
@@ -15532,7 +15390,7 @@ module.exports = TodosView = (function(_super) {
     return _ref;
   }
 
-  TodosView.prototype.el = '#main';
+  TodosView.prototype.container = '#main';
 
   TodosView.prototype.events = {
     'click #toggle-all': 'toggleCompleted'

labs/dependency-examples/chaplin-brunch/public/index.html

@@ -9,7 +9,6 @@
   <!--[if IE]>
   <script src="../../../assets/ie.js"></script>
   <![endif]-->
-  <link rel="stylesheet" href="app.css">
   <script src="app.js"></script>
   <script>require('initialize');</script>
 </head>