Backbone.js - 實例化現有的模型/視圖html

今天我開始關注backbone.js，以更好地組織我的應用程序中的代碼。Backbone.js - 實例化現有的模型/視圖html

我想知道（概念上 - 所以回覆僞代碼）我將如何使用我的現有的 html創建骨幹模型（和視圖）。

我發現的所有教程都是使用空白html模板，然後使用ajax注入內容。我不想這樣做。

如果我有一個藏書。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My Book Collection</title> 
</head> 
<body> 
    <head> 

    </head> 
    <body> 
     <ul id="bookCollection"> 
      <li class="book" data-book-id="1"><input type="text" name="book_1_name" value="My Book A"/></li> 
      <li class="book" data-book-id="2"><input type="text" name="book_2_name" value="My Book B"/></li> 
      <li class="book" data-book-id="3"><input type="text" name="book_3_name" value="My Book C"/></li> 
      <li class="book" data-book-id="4"><input type="text" name="book_4_name" value="My Book D"/></li> 
      <li class="book" data-book-id="5"><input type="text" name="book_5_name" value="My Book E"/></li> 
     </ul> 
    </body> 
</body> 
</html>

在這個階段，我想開始管理每本書作爲一種模式，調用每當本書的名字被更改的功能（只是在概念驗證功能的警報），然後調用一個URL同步用我的數據庫更改模型。

任何人都可以點我在正確的方向的方式做上述使用現有的HTML頁面上？

如果它有所作爲，我打算爲我的模板使用小鬍子。

來源

2011-07-21 calumbrodie

講述的是，如果你需要改變你的HTML因此，您的問題嗎？如果是這樣：不是。或者你想要JS？ –

@lazerscience - 我只想知道是否可以從現有的html創建視圖（而不是拉數據，使用數據+模板創建html以及注入頁面） - 以及我會怎樣做？在上面的例子中，我需要創建一個循環（我正在使用jQuery）併爲每個書籍元素創建一個視圖？ – calumbrodie

主幹的視圖始終綁定到特定的html元素（視圖的屬性el）。你可以有一個BookCollectionView綁定到ul#bookCollection和BookView綁定到li.book，這應該與您當前的模板結構一樣好。

您可以使用網址將Book模型映射到模型。如果從該URL獲取模型，並且已爲模型更改定義事件綁定，則相應視圖應使用新模型數據進行刷新。同樣適用於收藏集的網址和圖書集。

我猜骨架上沒有很多好的教程，但是學習的東西像http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/或http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/。如果你能想出一些更具體的問題，猜猜它更容易！

來源

2011-07-21 12:53:13

感謝您的回覆。當你說「BookView綁定到li.book，這對你當前的模板結構應該沒問題」。你的意思是一個視圖綁定到五個獨立的項目？這可以接受嗎？骨幹不需要分別跟蹤這5個項目嗎？對於廣泛的問題抱歉 - 我只是試圖在跳入之前掌握所涉及的概念。 – calumbrodie

它會將一個獨立的視圖實例綁定到每個「li」！發生這種情況時，視圖中定義的所有事件都將綁定到視圖的元素，所以如果重新呈現視圖，應該定義所有事件（這是使用主幹的一大優勢，不需要使用像jQuery一樣的東西在大多數情況下） –

感謝您的幫助 - 在不久的將來更愚蠢的問題毫無疑問 – calumbrodie

我真的想做同樣的事情，只是發現我的方式！

正在嘗試建立一個待辦事項列表示例，其中我已經在頁面上有一些待辦事項，希望將它們作爲模型放入我的Todos集合中，並讓它們以與添加到其中的元素相同的方式進行管理一個空白頁。

整個js代碼被粘貼爲一個要點https://gist.github.com/1255736與評論來解釋更多。

重要的是如何實例化集合。基本上：

你通過jQuery獲得你現有的html元素。如果您的模型視圖基於tagName：'li'，那麼這是您需要在此處檢索的標記類型。
您可以通過這些標記迭代湊這就是在那裏，構成你的模型數據，並創建你的模型
您創建一個視圖每個模型，傳遞模型和基體。這是我的問題：我正在創建視圖，然後嘗試通過my_view.el = xxx稍後添加它。這不起作用。
您的模型添加到收藏

注：集合通常綁定到後來視圖，以便使用collection.add將更新視圖中。由於在構造函數中調用了initialize，所以集合尚未被綁定，並且您不會在這裏添加元素，從而不會重複HTML中的元素。

// this is the important part for initializing from html! 
khepin.Todos = Backbone.Collection.extend({ 
    model: khepin.Todo, 

    // In this function we populate the list with existing html elements 
    initialize: function() { 
     _.each(
      // get all the <li></li> todo items (the base for the todo view) 
      // and for each of them: 
      $('.todo'), 
      function(a){ 
       // Create the model 
       var todo = new khepin.Todo(); 
       // Find the todo's text 
       var task = $(a).find('span')[0]; 
       task = $(task).text(); 
       // set the model correctly 
       todo.set({ 
        task: task 
       }); 
       // create the todo view 
       var todoView = new khepin.TodoView({ 
        model: todo, 
        el: a // the el has to be set here. I first tried calling new TodoView and setting the 'el' afterwards 
        // and the view wasn't managed properly. We set the "el' to be the <li></li> we got from jQuery 
      }); 
     // Add this new model to the collection 
     this.add(todo); 
     }, 
     this 
    ); 
} 
})

希望這有助於！

來源

2011-10-01 07:52:27 Khepin

我有同樣的問題，並在我的主視圖（ul列表）的構造函數中以這種方式解決它 - 骨幹0.9。

我在coffeescript語法中將它轉換成我的思想，所以如果有一些語法錯誤，請溫和。

myListView = Backbone.View.extend({ 
    initialize: function() { 
     ._each(this.$el.children(), function(book, i) { 
      new Backbone.View({ 
        el: book, 
        model: this.collection.at(i) 
      }); 
     }); 
    } 
});

，並調用它像這樣：

new myListView({ 
    collection: anExistingCollection, 
    el: $('#bookCollection') 
});

重要的是，收集「anExistingCollection」的順序是一樣的你已經生成的列表條目，這個例子依賴於相同的索引。

（未經測試）

來源

2012-02-16 12:19:30 acme

Backbone.js - 實例化現有的模型/視圖html

回答

相關問題