2

製品 (UL では LI アイテムとして表示される) を表すモデルと、これらの製品を保持するコレクションがあります。

1 つの LI をクリックすると、基になるモデルのプロパティが true に設定され、コレクション内の他のすべてのモデルのプロパティが false に設定されます。

//Model for product
        var cs_product = Backbone.Model.extend({
            defaults: function(){

                return {
                    name: '',
                    active: false
                };

            },
            initialize: function(){

                if(!this.get('name'))
                    this.set({'name': this.defaults.name});

            },
            toggle: function(){


                this.set({
                    active: !this.get('active')
                });

            }
        });





        //Collection of all products this user has access to
        var cs_products = Backbone.Collection.extend({
            _products: [],
            initialize: function(cs_products){
                this._products = cs_products
            },          
            model: cs_product //<-- creates an instance of the cs_product model for each of our products
        });     
        var user_client_products = new cs_products(globals.cs_user.cs_suite_products);
        user_client_products.on('change:active', function(el, i, list){

            console.log('collection change event');
            console.log(arguments);
            console.log(el.toJSON());

            //loop over all models in collection and set active to false except for this?
            this.each(function(el2){

                if(el === el2)
                    return;

                console.log(el2);

                el.set({active: false});


            });


        });
4

1 に答える 1

3

コレクション内のモデルのイベントもコレクションでトリガーされます。

Backbone.Collection
[...]
コレクション内のモデルでトリガーされるイベントは、便宜上、コレクションでも直接トリガーされます。これにより、コレクション内の任意のモデルの特定の属性への変更をリッスンできます。次に例を示します。Documents.on("change:selected", ...)

したがって、コレクションは、それ自体"change:active"のイベントにバインドするだけで、そのモデルからのイベントをリッスンできます"change:active"。次に、残りのモデル自体を非アクティブに設定できます。

var cs_products = Backbone.Collection.extend({
    model: cs_product,
    initialize: function() {
        _.bindAll(this, 'propagate_active');
        this.on('change:active', this.propagate_active);
    },
    propagate_active: function(p) {
        if(!p.get('active'))
            return;
        this.each(function(m) {
            if(p.id != m.id)
                m.set({ active: false }, { silent: true });
        });
    }
});

デモ: http://jsfiddle.net/ambiguous/WEkmy/

余談ですが、コレクション内のモデルを自分で追跡する理由はありません。

var cs_products = Backbone.Collection.extend({
    _products: [],
    initialize: function(cs_products) {
        this._products = cs_products; // <------------- ????
    },
    //...
});

this.modelsコレクションは、いくつかの装飾が組み込まれたモデルのリストであるため、すべてが組み込まれています。コレクション内からモデルの配列にアクセスするか、組み込みの Underscore メソッドを使用してコレクションのモデルを反復処理できます。

于 2012-06-10T00:11:12.897 に答える