在CoffeeScript中将现有HTML表示为Backbone.js数据结构

我在这件事上感到很难过

我有一个HTML列表，我想使用Backbone.js来处理这些列表项上的事件。这是我到目前为止得到的。这是一个简化的场景，可以帮助我更好地理解如何构造更大的应用程序。对于我的示例，我只想将现有的HTML列表摄取到主干结构中，并通过主干视图处理单击事件

我在视图中使用@model时遇到了一个错误，但我相当确定我在概念上误解了这里的内容

咖啡脚本：

$ ->
    class Item extends Backbone.Model
        name: null

    class ItemList extends Backbone.Collection
        model: Item

    class ItemView extends Backbone.View
        tagName: 'li'

        initialize: =>
            @model.bind('change', this.render)
            @model.view = this

        events:
            'click' : 'clicked'

        clicked: -> 
            console.log 'clicked'

        render: =>
            this

    class ItemListView extends Backbone.View
        el: $('ul#test')

        initialize: =>
            $('li', @el).each(@addItem)

        addItem: (item) ->
            item = new ItemView({ el: item })

        render: =>
            this

    Items = new ItemListView

HTML:

嗨，塔尔
嗯
嗯

---

这里是我之前开始的一个JSFIDLE:

我从来都不喜欢CoffeeScript（Javascript这么好，为什么要替换它？），但这里似乎有一些问题：

• 您在

  @model

  上遇到错误，因为您从未在

  项目视图上设置它。这不是自动发生的-您必须在
  initialize（）
  中实例化视图的模型，或者将其传递给构造函数，例如：
  
  addItem: (item) ->
      model = new ItemView({ 
          el: item, 
          model: new Item({ 
              // assuming you might want the list item text
              // in the model data
              text: $(item).text() 
          }) 
      })
  
  

• 您通常只想在

  el

  中指定一个选择器，而不是jQuery对象-否则，当您加载主干代码时，DOM可能没有准备好：

  el:'#test'

• 无论在

  initialize（）

  中执行什么操作，都需要将选项对象传递给

  ItemListView

  构造函数，而不仅仅是一个参数：

---

现在就开始玩这个-一定要开始点击。切换回JS，直到我更好地理解主干网的工作原理。好的，切换回JS:--获取“无法读取未定义的属性“0”啊，明白了。需要在addItem中引用“this”，而不是通过传递项

addItem: (item) ->
    model = new ItemView({ 
        el: item, 
        model: new Item({ 
            // assuming you might want the list item text
            // in the model data
            text: $(item).text() 
        }) 
    })

class ItemListView extends Backbone.View

    initialize: (opts) =>
        opts.items.each(@addItem)

    // ...

Items = new ItemListView({ items: $('ul#test li') })