16

質問があります。本当に基本的なことだと思いますが、

コレクション ビューと、更新されるコレクションに依存する単一ビューの例しか見たことがありません。複数のビューがコレクション イベントをサブスクライブしようとしている場合、つまり、reset、addOne、addAll など...

これを行う/行わないことについて、私はいくつかの点を見逃していますか? これの例はありますか？それは意味がありますか？

どんな情報でも大歓迎です

    var Coll = Backbone.Collection.extend({
        model: SingleModel,
        url: 'service',
        initialize: function(){
            console.log('collection inited')

        }        

    });

    var SingleModel = Backbone.Collection.extend({});            

    var CollView = Backbone.View.extend({                
        el: 'ul',
        template: Handlebars.compile(someContainerTemplate),
        init: function(){
            _.bindAll(this, 'render', 'addAll', 'addOne');
            this.collection.bind("reset", this.addAll);

            this.collection.fetch();
        },
        render: function(){
            $(this.el).append(this.template())
        },

        addAll: function(){
            this.collection.each(this.addOne);
        },

        addOne: function(model){
            var view = new SingleView({ model: model })            
        }
    })

    var SingleView = Backbone.View.extend({
        tagName: "li",
        events: {
            "click .delete": "remove"                    
        },
        template: Handlebars.compile(someTemplateForSingleItem),  
        initialize: function() {
        _.bindAll(this,'render');

            this.model.bind('save', this.addOne);
            this.model.bind('destroy', removeEl);
        },

        remove: function(){
          this.model.destroy();  
        },

        removeEl: function(){
          $(this.el).remove();  
        },

        render: function() {
            var context = this.model.toJSON();
            return $(this.el).append(this.template(context));
        },       
    })


    // standard so far (excluding any bad practices), 
    // but what if you have another view dependent on 
    // say the number of length of the collection, and 
    // you want it to update if any single models are destroyed

    var HeaderView = Backbone.View.extend({
        tagName: "div#header",
        template: Handlebars.compile(someHeaderTemplate), 
        initialize: function() {
        _.bindAll(this,'render');

        this.model.bind('save', this.addOne);
        },

        render: function() {
            //assigning this collection length

            var context = this.collection.length;
            return $(this.el).append(this.template(context));
        },      
    });        

    var coll = new Coll();
    new CollView({ collection: coll });
    new HeaderView({ collection: coll});
4

2 に答える 2

30

あなたがしていることはまったく問題なく、Backbone を使用する理由の一部です。バックボーンの紹介から：

UI アクションによってモデルの属性が変更されるたびに、モデルは「変更」イベントをトリガーします。モデルの状態を表示するすべてのビューに変更を通知できます。

「ビュー」ではなく「すべてのビュー」と表示されていることに注意してください。

1 つのコレクションに対する複数のビューの 1 つの例は、チャット システムです。オンラインのユーザーのコレクションがあるとします。次に、ヘッダーにオンラインの人数を表示する単純なビューと、ユーザーを一覧表示する (同じコレクションの) 別のビューを含めることができます。

var User = Backbone.Model.extend({});
var OnlineUsers = Backbone.Collection.extend({
    model: User
});

var CounterView = Backbone.View.extend({
    tagName: 'span',
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('add', this.render);
        // other interesting events...
    },
    render: function() {
        this.$el.text(this.collection.size());
        return this;
    }
});
var ListView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('add', this.render);
        // other interesting events...
    },
    render: function() {
        var html = this.collection.map(function(m) {
            return '<p>' + m.get('name') + '</p>';
        });
        this.$el.html(html.join(''));
        return this;
    }
});

次に、1 つのOnlineUsersインスタンスがありますが、インスタンスCounterViewとListViewインスタンスの両方がそれを監視します。ユーザーがオンラインになったりオフラインになったりすると、両方のビューが必要に応じて更新されます。

簡単なデモ: http://jsfiddle.net/ambiguous/eX7gZ/

上記の例の状況は、まさにあなたがやっていることのようなものであり、Backbone がまさにそのためのものです。よくできた。

于 2012-04-26T21:45:27.610 に答える