我今天开始研究backbone.js，作为更好地组织应用程序中代码的一种方式。
我想知道(概念上 - 所以一定要用伪代码回复)我将如何使用我的现有 html来创建主干模型(和 View )。
我发现的所有教程都包括使用空白 html 模板，然后使用 ajax 注入(inject)内容。我不想这样做。
如果我有一系列书籍。
<!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 执行上述操作的方法吗？
如果它有所作为，我计划在我的模板中使用 mustache 。
最佳答案
我也真的想做同样的事情，只是找到了解决办法!
试图构建一个待办事项列表示例，其中页面上已经有一些待办事项，希望将它们作为模型放入我的待办事项集合中，并以与添加到元素中的元素相同的方式管理它们空白页。
整个js代码作为要点粘贴在那里https://gist.github.com/1255736并附有注释以解释更多信息。
重要的部分是如何实例化集合。基本上:
- 您可以通过 jQuery 获取现有的 html 元素。如果您的模型的 View 基于 tagName:“li”，那么这就是您需要在此处检索的标记类型。
- 您可以迭代这些标签来抓取其中构成模型的数据并创建模型
- 您为每个模型创建一个 View ，并向其传递模型和基本元素。这就是我遇到的问题:我正在创建 View ，然后才尝试稍后通过 my_view.el = xxx 添加它。这是行不通的。
- 您将模型添加到集合中
注意:集合通常会稍后绑定(bind)到 View ，因此使用 collection.add 也会更新 View 。由于在构造函数中调用了初始化，因此集合尚未绑定(bind)，并且您不会通过在此处添加元素来重复 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
);
}
})
希望这有帮助!
关于jquery - Backbone.js - 从现有 html 实例化模型/ View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6775379/