Merge pull request #713 from chaplinjs/chapl

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

-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

+# 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

 View = require './base/view'
-template = require './templates/footer'
+utils = require 'lib/utils'
 
 module.exports = class FooterView extends View
   autoRender: true
@@ -9,7 +9,7 @@ module.exports = class FooterView extends View
   listen:
     'todos:filter mediator': 'updateFilterer'
     'all collection': 'renderCounter'
-  template: template
+  template: require './templates/footer'
 
   render: ->
     super
@@ -17,23 +17,24 @@ module.exports = class FooterView extends View
 
   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

 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

 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

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

labs/dependency-examples/chaplin-brunch/readme.md

@@ -2,6 +2,9 @@
 
 > Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices.
 
+In this case, Backbone is replaced with [Exoskeleton](http://exosjs.com),
+faster and leaner Backbone without dependencies on jQuery and underscore.
+
 > _[Chaplin - chaplinjs.org](http://chaplinjs.org)_
 
 

learn.json

@@ -357,19 +357,16 @@
 			"heading": "Official Resources",
 			"links": [{
 				"name": "Getting Started",
-				"url": "https://github.com/chaplinjs/chaplin/blob/master/docs/getting_started.md"
+				"url": "http://docs.chaplinjs.org/getting_started.html"
 			}, {
 				"name": "Documentation",
-				"url": "https://github.com/chaplinjs/chaplin/tree/master/docs"
-			}, {
-				"name": "API Reference",
-				"url": "https://github.com/chaplinjs/chaplin/tree/master/docs#api-docs"
+				"url": "http://docs.chaplinjs.org"
 			}, {
 				"name": "Annotated Source Code",
 				"url": "http://chaplinjs.org/annotated/chaplin.html"
 			}, {
 				"name": "Applications built with Chaplin",
-				"url": "https://github.com/chaplinjs/chaplin/wiki/Projects-and-companies-using-Chaplin"
+				"url": "http://chaplinjs.org/examples.html"
 			}, {
 				"name": "Cookbook",
 				"url": "https://github.com/chaplinjs/chaplin/wiki/Cookbook"
@@ -386,6 +383,9 @@
 		}, {
 			"heading": "Community",
 			"links": [{
+				"name": "Support forum on ost.io",
+				"url": "http://ost.io/@chaplinjs/chaplin"
+			}, {
 				"name": "Chaplin on StackOverflow",
 				"url": "http://stackoverflow.com/questions/tagged/chaplinjs"
 			}, {
@@ -911,7 +911,7 @@
 		"name": "Exoskeleton",
 		"description": "A faster and leaner Backbone for your HTML5 apps.",
 		"homepage": "exosjs.com",
-		"source_path": [{
+		"examples": [{
 			"name": "Architecture Example",
 			"url": "labs/architecture-examples/exoskeleton"
 		}],