在CoffeeScript中將現有的HTML表示爲Backbone.js數據結構

我正在艱難地度過這段時間。在CoffeeScript中將現有的HTML表示爲Backbone.js數據結構

我有一個HTML列表，我想用Backbone.js來處理這些列表項上的事件。這是迄今爲止我所擁有的。這是一個簡化的場景，可以幫助我更好地瞭解如何構建更大的應用程序。就我的例子而言，我只想將現有的HTML列表攝取到Backbone結構中，並通過Backbone視圖處理點擊事件。

我得到一個錯誤，在視圖中使用@model，但我相當肯定我在這裏誤解了概念上的東西。

的CoffeeScript：

$ -> 
    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：

<ul id="test"> 
    <li>Hi thar</li> 
    <li>Yeah</li> 
    <li>OK</li> 
</ul>

這裏是我開始的jsfiddle早些時候：http://jsfiddle.net/Saxx4/

來源

2011-11-03 Nick Sergeant

我從來沒有真正喜歡的CoffeeScript（JavaScript是那麼好，爲什麼更換呢？），但它看起來像這裏有幾個問題：

您在@model上遇到錯誤，因爲您從未將其設置爲ItemView。這不會自動發生 - 你必須要麼實例化視圖的模型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'

你需要傳遞一個選項反對ItemListView構造，而不僅僅是一個單一的說法，無論你在initialize()做什麼：

class ItemListView extends Backbone.View 

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

    // ... 

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

來源

2011-11-03 00:29:10 nrabinowitz

現在玩這個 - 絕對開始點擊。切換回JS，直到我更好地理解Backbone的工作方式。 –

好吧，切換回JS：http://jsfiddle.net/nicksergeant/b2RUW/ - 獲取「無法讀取屬性'0'未定義」 –

啊，明白了。需要在addItem中引用「this」，而不是傳遞item –

在CoffeeScript中將現有的HTML表示爲Backbone.js數據結構

回答

相關問題