1

我正在使用 Backbone.js 构建我的第一个 Web 应用程序。到现在为止还挺好。我正在寻找一些指导：

我有一个<ul>我想填充的<li>代表“产品”

这是我到目前为止所定义的：

  • 1 个模型 -> 产品
  • 1 个系列 -> 产品
  • 1 个视图 -> view_product （表示单个产品的视图 - 一个<li>）

我通过传递一个代表我的产品的对象数组来创建集合的一个实例，我知道这会为集合中的每个产品创建模型的实例。

我对下一步该做什么感到困惑。我应该为每个模型循环使用_.each()、创建和实例的集合，然后尝试将它们附加到我的? 有人告诉我这是错误的想法。view_productproducts<ul>

4

1 回答 1

1

我通过传递一个代表我的产品的对象数组来创建集合的一个实例，我知道这会为集合中的每个产品创建模型的实例。

你理解正确。

您可能希望为产品集合再添加一个视图，该视图将是 a<ul>并且它将管理每个产品的视图（它们是<li>s）：

var V = Backbone.View.extend({
    tagName: 'ul',
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('reset', this.render);
        // And other events as needed...
    },
    render: function() {
        var _this = this;
        this.collection.each(function(p) {
            var v = new view_product({ model: p });
            _this.$el.append(v.render().el);
        });
        return this;
    }
});

Collections 已经混合了许多 Underscore 方法，因此您不需要_.each(collection.models, ...)，collection.each(...)也可以正常工作并且更惯用。

然后，您将实例化并呈现您的每个集合视图之一：

var v = new V({ collection: your_existing_products_collection });
$(some_container).append(v.render().el);

Backbonecollection专门对待视图的选项，这就是this.collection从哪里来的initialize。

每个产品的视图将负责绑定到产品的事件（例如名称、价格、数量、...更改），并负责从用户的购物车中添加/删除产品。每个集合视图负责涉及整个集合的任何事情：集合重置，添加新产品，删除产品，......

这是一个快速的'n'dirty演示，以帮助说明我在说什么：http: //jsfiddle.net/ambiguous/SSstN/1/

于 2012-06-09T23:51:25.270 回答