14

今天我已经开始研究backbone.js，以此来更好地组织我的应用程序中的代码。

我想知道（从概念上讲 - 所以一定要用伪代码回复）我将如何使用我现有的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 来完成上述操作？

如果它有所作为，我计划在我的模板中使用小胡子。

4

3 回答 3

15

我真的也在尝试做同样的事情，只是找到了解决方法！

正在尝试构建一个待办事项列表示例，其中我已经在页面上有一些待办事项，希望将它们作为模型带到我的待办事项集合中，并让它们以与添加到空白页面的元素相同的方式进行管理。

整个 js 代码作为要点粘贴在那里https://gist.github.com/1255736并带有注释以解释更多信息。

重要的部分是关于如何实例化集合。基本上：

  1. 您可以通过 jQuery 获取现有的 html 元素。如果您的模型视图基于 tagName: 'li'，那么这就是您需要在此处检索的标记类型。
  2. 您遍历这些标签以抓取构成模型的数据并创建模型
  3. 您为每个模型创建一个视图，将模型和基本元素传递给它。这就是我遇到的问题：我正在创建视图，然后才尝试稍后通过 my_view.el = xxx 添加它。这行不通。
  4. 您将模型添加到集合中

注意：集合通常稍后会绑定到视图，因此使用 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-01T07:52:27.747 回答
6

Backbone 的视图总是绑定到特定的 html 元素（视图的属性el）。你可以有一个BookCollectionViewbound toul#bookCollection和一个BookViewbound to之类的东西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/。猜猜如果你能想出一些更具体的问题会更容易！

于 2011-07-21T12:53:13.863 回答
2

我遇到了同样的问题，并在我的主视图（ul 列表）的构造函数中以这种方式解决了它 - 从主干 0.9 开始。

我在脑海中将它从咖啡脚本语法转换为，所以如果有一些语法错误，请轻描淡写。

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-16T12:19:30.407 回答