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/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>