cal*_*die 14 jquery mustache backbone.js underscore.js
我今天开始关注backbone.js,以便更好地组织应用程序中的代码.
我想知道(概念上 - 所以通过各种方式回复伪代码)如何使用我现有的 html来创建Backbone模型(和视图).
我发现的所有教程都包括使用空白的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进行上述操作吗？
如果它有所作为我打算使用胡子来模仿我的模板.
Khe*_*pin 15
我真的想要做同样的事情,只是找到了我的方式!
试图建立一个todo列表示例,我已经在页面上有一些待办事项,想要将它们作为我的Todos集合中的模型,并使它们的管理方式与添加到空白页面的元素相同.
整个js代码粘贴在https://gist.github.com/1255736上,并附有评论以解释更多内容.
重要的部分是如何实例化集合.基本上:
注意:该集合通常与视图绑定,以便使用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
);
}
})
希望这可以帮助!
Backbone的视图总是绑定到一个特定的html元素(视图的属性el).你可以拥有类似于BookCollectionView绑定ul#bookCollection和BookView绑定的东西li.book,这对你当前的模板结构应该没问题.
您可以使用Book模型的URL将模型映射到视图.如果从该URL获取模型并且您已为模型更改定义了事件绑定,则应使用新模型数据刷新相应视图.同样适用于集合的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/.如果你能提出一些更具体的问题,那就更容易了!