tastejs · addyosmani · Jul 31, 2013 · Jul 27, 2013 · Jul 28, 2013 · Jul 28, 2013
diff --git a/labs/dependency-examples/chaplin-brunch/.gitignore b/labs/dependency-examples/chaplin-brunch/.gitignore
@@ -1,3 +1,6 @@
+bower_components/
+!bower_components/todomvc-common/
+
 # NPM packages folder.
 node_modules/
 

diff --git a/labs/dependency-examples/chaplin-brunch/app/application.coffee b/labs/dependency-examples/chaplin-brunch/app/application.coffee
@@ -1,67 +1,21 @@
-Chaplin = require 'chaplin'
 mediator = require 'mediator'
-routes = require 'routes'
-HeaderController = require 'controllers/header-controller'
-FooterController = require 'controllers/footer-controller'
-TodosController = require 'controllers/todos-controller'
 Todos = require 'models/todos'
-Layout = require 'views/layout'
 
 # The application object
 module.exports = class Application extends Chaplin.Application
   # Set your application name here so the document title is set to
   # “Controller title – Site title” (see Layout#adjustTitle)
   title: 'Chaplin • TodoMVC'
 
-  initialize: ->
-    super
-
-    # Initialize core components
-    @initDispatcher controllerSuffix: '-controller'
-    @initLayout()
-    @initMediator()
-
-    # Application-specific scaffold
-    @initControllers()
-
-    # Register all routes and start routing
-    @initRouter routes, pushState: no
-    # You might pass Router/History options as the second parameter.
-    # Chaplin enables pushState per default and Backbone uses / as
-    # the root per default. You might change that in the options
-    # if necessary:
-    # @initRouter routes, pushState: false, root: '/subdir/'
-
-    # Freeze the application instance to prevent further changes
-    Object.freeze? this
-
-  # 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}
-
-  # Instantiate common controllers
-  # ------------------------------
-  initControllers: ->
-    # These controllers are active during the whole application runtime.
-    # You don’t need to instantiate all controllers here, only special
-    # controllers which do not to respond to routes. They may govern models
-    # and views which are needed the whole time, for example header, footer
-    # or navigation views.
-    # e.g. new NavigationController()
-    new HeaderController()
-    new FooterController()
-    new TodosController()
-
   # Create additional mediator properties
   # -------------------------------------
   initMediator: ->
     # Create a user property
     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
-    mediator.seal()
+    super
diff --git a/labs/dependency-examples/chaplin-brunch/app/assets/index.html b/labs/dependency-examples/chaplin-brunch/app/assets/index.html
@@ -3,22 +3,13 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>Chaplin & Brunch • TodoMVC</title>
-  <link rel="stylesheet" href="../../../../assets/base.css">
+  <title>Chaplin &amp; Brunch • TodoMVC</title>
+  <link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
+  <link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
   <!--[if IE]>
   <script src="../../../assets/ie.js"></script>
   <![endif]-->
-  <link rel="stylesheet" href="stylesheets/app.css">
-
-  <!-- Usually all these files are concatenated automatically
-  by brunch and you need just to import `vendor.js` -->
-  <script src="../../../../assets/base.js"></script>
-  <script src="../../../../assets/jquery.min.js"></script>
-  <script src="../../../../assets/lodash.min.js"></script>
-  <script src="../../../../assets/handlebars.min.js"></script>
-
-  <script src="javascripts/vendor.js"></script>
-  <script src="javascripts/app.js"></script>
+  <script src="app.js"></script>
   <script>require('initialize');</script>
 </head>
 <body>

diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/base/controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/base/controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/footer-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/footer-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/header-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/header-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/index-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/index-controller.coffee
@@ -1,7 +1,25 @@
-Controller = require 'controllers/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
-  title: 'Todo list'
+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
 
-  list: (options) ->
-    @publishEvent 'todos:filter', options.filterer?.trim() ? 'all'
+  # 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) ->
+    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
diff --git a/labs/dependency-examples/chaplin-brunch/app/controllers/todos-controller.coffee b/labs/dependency-examples/chaplin-brunch/app/controllers/todos-controller.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/initialize.coffee b/labs/dependency-examples/chaplin-brunch/app/initialize.coffee
@@ -1,6 +1,7 @@
 Application = require 'application'
+routes = require 'routes'
 
 # Initialize the application on DOM ready event.
 $ ->
-  app = new Application()
-  app.initialize()
+  new Application
+    controllerSuffix: '-controller', pushState: false, routes: routes
diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/support.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/support.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/lib/view-helper.coffee b/labs/dependency-examples/chaplin-brunch/app/lib/view-helper.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/mediator.coffee b/labs/dependency-examples/chaplin-brunch/app/mediator.coffee
@@ -1 +1 @@
-module.exports = require('chaplin').mediator
+module.exports = Chaplin.mediator
diff --git a/labs/dependency-examples/chaplin-brunch/app/models/base/collection.coffee b/labs/dependency-examples/chaplin-brunch/app/models/base/collection.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/models/base/model.coffee b/labs/dependency-examples/chaplin-brunch/app/models/base/model.coffee
diff --git a/labs/dependency-examples/chaplin-brunch/app/models/todo.coffee b/labs/dependency-examples/chaplin-brunch/app/models/todo.coffee
@@ -1,6 +1,8 @@
-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

diff --git a/labs/dependency-examples/chaplin-brunch/app/models/todos.coffee b/labs/dependency-examples/chaplin-brunch/app/models/todos.coffee
@@ -1,7 +1,6 @@
-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'
 

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/base/collection-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/base/collection-view.coffee
@@ -1,7 +1,7 @@
-Chaplin = require 'chaplin'
 View = require 'views/base/view'
 
 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
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/base/view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/base/view.coffee
@@ -1,6 +1,3 @@
-Chaplin = require 'chaplin'
-require 'lib/view-helper' # Just load the view helpers, no return value
-
 module.exports = class View extends Chaplin.View
   # Precompiled templates function initializer.
   getTemplateFunction: ->

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee
@@ -1,29 +1,28 @@
-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'
+  listen:
+    'todos:filter mediator': 'updateFilterer'
+    'all collection': 'renderCounter'
   template: template
 
-  initialize: ->
-    super
-    @subscribeEvent 'todos:filter', @updateFilterer
-    @modelBind 'all', @renderCounter
-    @delegate 'click', '#clear-completed', @clearCompleted
-
-  render: =>
+  render: ->
     super
     @renderCounter()
 
-  updateFilterer: (filterer) =>
+  updateFilterer: (filterer) ->
     filterer = '' if filterer is 'all'
     @$('#filters a')
       .removeClass('selected')
       .filter("[href='#/#{filterer}']")
       .addClass('selected')
 
-  renderCounter: =>
+  renderCounter: ->
     total = @collection.length
     active = @collection.getActive().length
     completed = @collection.getCompleted().length

diff --git a/labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee b/labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee
@@ -1,18 +1,16 @@
-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'
   template: template
 
-  initialize: ->
-    super
-    @delegate 'keypress', '#new-todo', @createOnEnter
-
-   createOnEnter: (event) =>
-     ENTER_KEY = 13
-     title = $(event.currentTarget).val().trim()
-     return if event.keyCode isnt ENTER_KEY or not title
-     @collection.create {title}
-     @$('#new-todo').val ''
+  createOnEnter: (event) =>
+    ENTER_KEY = 13
+    title = $(event.currentTarget).val().trim()
+    return if event.keyCode isnt ENTER_KEY or not title
+    @collection.create {title}
+    @$('#new-todo').val ''
diff --git a/labs/dependency-examples/chaplin-brunch/app/views/layout.coffee b/labs/dependency-examples/chaplin-brunch/app/views/layout.coffee
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = require('chaplin').mediator
		module.exports = Chaplin.mediator