Hello Backbone.js 用 CoffeeScript 改寫

Hello Backbone.js 是不錯的 Backbone.js 入門教學, 為了個人學習 CoffeeScript, 所以把裡面的例子都以 CoffeeScript 重新改寫, 希望可以一石兩鳥。執行使用的 JS lib 除了多了 http://jashkenas.github.com/coffee-script/extras/coffee-script.js 之外, 其餘只有版本上的差異。這篇主要的目的是做個人的學習過程記錄。

1 ------------------------------------------------

$ = jQuery

class ListView extends Backbone.View
 el: $ 'body'
 initialize: ->
  _.bindAll @, 'render'
  @render()
 render: ->
  $(@el).append '<ul><li>Hello Backbone!</li></ul>'

listView = new ListView

2 ------------------------------------------------

$ = jQuery

class ListView extends Backbone.View
 el: $ 'body'
 events:
  'click button#add': 'addItem'
 initialize: ->
  _.bindAll @, 'render', 'addItem'
  @counter = 0
  @render()
 render: ->
  $(@el).append '<button id="add">Add list item</button>'
  $(@el).append '<ul></ul>'

 addItem: ->
  @counter++
  $('ul', @el).append "<li>Hello Backbone #{@counter}</li>"

listView = new ListView

3 ------------------------------------------------

$ = jQuery

class Item extends Backbone.Model
 defaults: 
  part1: 'Hello'
  part2: 'World'

class List extends Backbone.Collection
 model: Item

class ListView extends Backbone.View
 el: $ 'body'
 events:
  'click button#add': 'addItem'
 initialize: ->
  _.bindAll @, 'render', 'addItem', 'appendItem'
  @collection = new List
  @collection.on 'add', @appendItem
  @counter = 0
  # @collection.add [new Item, new Item]
  @render()
 render: ->
  self = @
  $(@el).append '<button id="add">Add list item</button>'
  $(@el).append '<ul></ul>'
  _(@collection.models).each ((item)->self.appendItem(item)), @
 addItem: ->
  @counter++
  item = new Item
  item.set
   part2: item.get('part2') + ' ' + @counter
  @collection.add item
 appendItem: (item)->
  $('ul', @el).append "<li>#{item.get('part1')} #{item.get('part2')}</li>"

listView = new ListView

4 ------------------------------------------------

$ = jQuery

class Item extends Backbone.Model
 defaults:
  part1: 'Hello'
  part2: 'World'

class List extends Backbone.Collection
 model: Item

class ItemView extends Backbone.View
 tagName: 'li'
 initialize: ->
  _.bindAll @, 'render'
 render: ->
  $(@el).html "<span>#{@model.get('part1')} #{@model.get('part2')}</span>"
  @

class ListView extends Backbone.View
 el: $ 'body'
 events:
  'click button#add': 'addItem'
 initialize: ->
  _.bindAll @, 'render', 'addItem', 'appendItem'
  @collection = new List
  @collection.on 'add', @appendItem
  @counter = 0
  # @collection.add [new Item, new Item]
  @render()
 render: ->
  self = @
  $(@el).append '<button id="add">Add list item</button>'
  $(@el).append '<ul></ul>'
  _(@collection.models).each ((item)->
   self.appendItem(item)), @
 addItem: ->
  @counter++
  item = new Item
  item.set
   part2: item.get('part2') + ' ' + @counter
  @collection.add item
 appendItem: (item)->
  itemView = new ItemView
   model: item
  $('ul', @el).append itemView.render().el

listView = new ListView

5 ------------------------------------------------

$ = jQuery

Backbone.sync = (method, model, success, error)->
 success()

class Item extends Backbone.Model
 defaults:
  part1: 'Hello'
  part2: 'World'

class List extends Backbone.Collection
 model: Item

class ItemView extends Backbone.View
 tagName: 'li'
 events:
  'click span.swap': 'swap'
  'click span.delete': 'remove'
 initialize: ->
  _.bindAll @, 'render', 'unrender', 'swap', 'remove'
  @model.on 'change', @render
  @model.on 'destroy', @unrender
 render: ->
  $(@el).html """<span style='color:black'>
    #{@model.get('part1')} #{@model.get('part2')}</span>
    &nbsp;&nbsp;
    <span class='swap' style='color:blue; cursor:pointer;'>
    [swap]</span>
    <span class='delete' style='color:red; cursor:pointer;'>
    [delete]</span>
    """
  @
 unrender: ->
  $(@el).remove()
 swap: ->
  swapped =
   part1: @model.get 'part2'
   part2: @model.get 'part1'
  @model.set swapped
 remove: ->
  @model.destroy()

class ListView extends Backbone.View
 el: $ 'body'
 events:
  'click button#add': 'addItem'
 initialize: ->
  _.bindAll @, 'render', 'addItem', 'appendItem'
  @collection = new List
  @collection.on 'add', @appendItem
  @counter = 0
  @render()
 render: ->
  self = @
  $(@el).append "<button id='add'>Add list item</button>"
  $(@el).append "<ul></ul>"
  _(@collection.models).each ((item)->
   self.appendItem item), @
 addItem: ->
  @counter++
  item = new Item
  item.set
   part2: item.get('part2') + ' ' + @counter
  @collection.add item
 appendItem: (item)->
  itemView = new ItemView
   model: item
  $('ul', @el).append itemView.render().el

listView = new ListView

修改 Model ------------------------------------------------

$ = jQuery

class Item extends Backbone.Model
 @counter: 0
 @part1: 'Hello'
 @part2: 'World '
 defaults:
  part1: Item.part1
  part2: Item.part2
 initialize: ->
  Item.counter++

class List extends Backbone.Collection
 model: Item

class ItemView extends Backbone.View
 tagName: 'li'
 events:
  'click span.swap': 'swap'
  'click span.delete': 'remove'
 initialize: ->
  _.bindAll @, 'render', 'unrender', 'swap', 'remove'
  @model.on 'change', @render
  @model.on 'destroy', @unrender
 render: ->
  $(@el).html """<span style='color:black'>
    #{@model.get('part1')} #{@model.get('part2')}</span>
    &nbsp;&nbsp;
    <span class='swap' style='color:blue; cursor:pointer;'>
    [swap]</span>
    <span class='delete' style='color:red; cursor:pointer;'>
    [delete]</span>
    """
  @
 unrender: ->
  $(@el).remove()
 swap: ->
  swapped =
   part1: @model.get 'part2'
   part2: @model.get 'part1'
  @model.set swapped
 remove: ->
  @model.destroy()

class ListView extends Backbone.View
 el: $ 'body'
 events:
  'click button#add': 'addItem'
 initialize: ->
  _.bindAll @, 'render', 'addItem', 'appendItem'
  @collection = new List
  @collection.on 'add', @appendItem
  @render()
 render: ->
  self = @
  $(@el).append "<button id='add'>Add list item</button>"
  $(@el).append "<ul></ul>"
  _(@collection.models).each ((item)->
   self.appendItem item), @
 addItem: ->
  item = new Item
   part2: Item.part2 + Item.counter
  @collection.add item
 appendItem: (item)->
  itemView = new ItemView
   model: item
  $('ul', @el).append itemView.render().el

listView = new ListView