Update Chaplin app

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

@@ -10,12 +10,12 @@ module.exports = class Application extends Chaplin.Application
   # 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
     super
+
+  start: ->
+    # If todos are fetched from server, we will need to wait for them.
+    mediator.todos.fetch()
+    super

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

@@ -1,6 +1,6 @@
-HeaderView = require 'views/header-view'
-FooterView = require 'views/footer-view'
-TodosView = require 'views/todos-view'
+HeaderView = require '../views/header-view'
+FooterView = require '../views/footer-view'
+TodosView = require '../views/todos-view'
 mediator = require 'mediator'
 
 module.exports = class IndexController extends Chaplin.Controller

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

@@ -2,6 +2,7 @@ Application = require 'application'
 routes = require 'routes'
 
 # Initialize the application on DOM ready event.
-$ ->
+document.addEventListener 'DOMContentLoaded', ->
   new Application
     controllerSuffix: '-controller', pushState: false, routes: routes
+, false

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

@@ -0,0 +1,14 @@
+# Application-specific utilities
+# ------------------------------
+
+# Delegate to Chaplin’s utils module.
+utils = Chaplin.utils.beget Chaplin.utils
+
+Backbone.utils.extend utils,
+  toggle: (elem, visible) ->
+    elem.style.display = (if visible then '' else 'none')
+
+# Prevent creating new properties and stuff.
+Object.seal? utils
+
+module.exports = utils

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

@@ -1,5 +1,5 @@
 View = require './base/view'
-template = require './templates/footer'
+utils = require 'lib/utils'
 
 module.exports = class FooterView extends View
   autoRender: true
@@ -9,31 +9,32 @@ module.exports = class FooterView extends View
   listen:
     'todos:filter mediator': 'updateFilterer'
     'all collection': 'renderCounter'
-  template: template
+  template: require './templates/footer'
 
   render: ->
     super
     @renderCounter()
 
   updateFilterer: (filterer) ->
     filterer = '' if filterer is 'all'
-    @$('#filters a')
-      .removeClass('selected')
-      .filter("[href='#/#{filterer}']")
-      .addClass('selected')
+    selector = "[href='#/#{filterer}']"
+    cls = 'selected'
+    @findAll('#filters a').forEach (link) =>
+      link.classList.remove cls
+      link.classList.add cls if Backbone.utils.matchesSelector link, selector
 
   renderCounter: ->
     total = @collection.length
     active = @collection.getActive().length
     completed = @collection.getCompleted().length
 
-    @$('#todo-count > strong').html active
+    @find('#todo-count > strong').textContent = active
     countDescription = (if active is 1 then 'item' else 'items')
-    @$('.todo-count-title').text countDescription
+    @find('.todo-count-title').textContent = countDescription
 
-    @$('#completed-count').html "(#{completed})"
-    @$('#clear-completed').toggle(completed > 0)
-    @$el.toggle(total > 0)
+    @find('#completed-count').textContent = "(#{completed})"
+    utils.toggle @find('#clear-completed'), completed > 0
+    utils.toggle @el, total > 0
 
   clearCompleted: ->
     @publishEvent 'todos:clear'

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

@@ -1,16 +1,15 @@
 View = require './base/view'
-template = require './templates/header'
 
 module.exports = class HeaderView extends View
   autoRender: true
   el: '#header'
   events:
     'keypress #new-todo': 'createOnEnter'
-  template: template
+  template: require './templates/header'
 
-  createOnEnter: (event) =>
+  createOnEnter: (event) ->
     ENTER_KEY = 13
-    title = $(event.currentTarget).val().trim()
+    title = event.delegateTarget.value.trim()
     return if event.keyCode isnt ENTER_KEY or not title
     @collection.create {title}
-    @$('#new-todo').val ''
+    @find('#new-todo').value = ''

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

@@ -1,34 +1,33 @@
 View = require './base/view'
-template = require './templates/todo'
 
 module.exports = class TodoView extends View
   events:
     'click .toggle': 'toggle'
     'dblclick label': 'edit'
-    'keypress .edit': 'save'
-    'blur .edit': 'save'
-    'click .destroy': 'destroy'
+    'keyup .edit': 'save'
+    'focusout .edit': 'save'
+    'click .destroy': 'clear'
 
   listen:
     'change model': 'render'
 
-  template: template
+  template: require './templates/todo'
   tagName: 'li'
 
-  destroy: =>
+  clear: ->
     @model.destroy()
 
-  toggle: =>
+  toggle: ->
     @model.toggle().save()
 
-  edit: =>
-    @$el.addClass 'editing'
-    @$('.edit').focus()
+  edit: ->
+    @el.classList.add 'editing'
+    @find('.edit').focus()
 
-  save: (event) =>
+  save: (event) ->
     ENTER_KEY = 13
-    title = $(event.currentTarget).val().trim()
+    title = event.delegateTarget.value.trim()
     return @model.destroy() unless title
-    return if event.type is 'keypress' and event.keyCode isnt ENTER_KEY
+    return if event.type is 'keyup' and event.keyCode isnt ENTER_KEY
     @model.save {title}
-    @$el.removeClass 'editing'
+    @el.classList.remove 'editing'

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

@@ -1,6 +1,6 @@
 CollectionView = require './base/collection-view'
-template = require './templates/todos'
 TodoView = require './todo-view'
+utils = require 'lib/utils'
 
 module.exports = class TodosView extends CollectionView
   container: '#main'
@@ -11,18 +11,18 @@ module.exports = class TodosView extends CollectionView
   listen:
     'all collection': 'renderCheckbox'
     'todos:clear mediator': 'clear'
-  template: template
+  template: require './templates/todos'
 
-  render: =>
+  render: ->
     super
     @renderCheckbox()
 
-  renderCheckbox: =>
-    @$('#toggle-all').prop 'checked', @collection.allAreCompleted()
-    @$el.toggle(@collection.length isnt 0)
+  renderCheckbox: ->
+    @find('#toggle-all').setAttribute 'checked', @collection.allAreCompleted()
+    utils.toggle @el, @collection.length isnt 0
 
-  toggleCompleted: (event) =>
-    isChecked = event.currentTarget.checked
+  toggleCompleted: (event) ->
+    isChecked = event.delegateTarget.checked
     @collection.each (todo) -> todo.save completed: isChecked
 
   clear: ->