1

Backbone.js を使用して最初の Web アプリを構築しています。ここまでは順調ですね。私は少しのガイダンスを探しています：

「製品」を表すデータ<ul>を入力したい<li>

これは私がこれまでに定義したものです：

  • 1 モデル -> 製品
  • 1 コレクション -> 製品
  • 1 ビュー -> view_product (単一の製品を表すビュー -- one <li>)

製品を表すオブジェクトの配列を渡すことで、コレクションのインスタンスを作成しました。これにより、コレクション内の各製品のモデルのインスタンスが作成されることを理解しています。

次に何をしようか迷っています。の各モデルのコレクション_.each()、作成、およびインスタンスをループしてから、それらを my に追加しようとする必要がありますか? それは間違った考えだと何かが教えてくれます。view_productproducts<ul>

4

1 に答える 1

1

商品を表すオブジェクトの配列を渡すことでコレクションのインスタンスを作成しました。これにより、コレクション内の各商品のモデルのインスタンスが作成されることを理解しています。

あなたは正しく理解しています。

製品のコレクションにもう1つのビューを追加することをお勧めします。このビューは、<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;
    }
});

コレクションにはすでに多くのアンダースコアメソッドが混在して_.each(collection.models, ...)いるため、必要はなくcollection.each(...)、同様に機能し、より慣用的です。

次に、コレクションごとのビューの1つをインスタンス化してレンダリングします。

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

バックボーンはcollection、ビューへのオプションを特別に扱います。これは、のthis.collection由来initializeです。

製品ごとのビューは、製品のイベント（名前、価格、数量、...変更など）へのバインドを処理し、人のカートからの製品の追加/削除を処理します。コレクションごとのビューは、コレクション全体に関連するすべての責任を負います。コレクションのリセット、新製品の追加、製品の削除、...

これが私が話していることを説明するのに役立つ簡単な「n」ダーティデモです：http：//jsfiddle.net/ambiguous/SSstN/1/

于 2012-06-09T23:51:25.270 に答える