2

StackOverflow や他の場所でこの同じトピックに関する多くの質問/回答があるにもかかわらず、私はまだ続行方法を理解していません。コレクションを変更して、ビューでレンダリング機能をトリガーしたいと考えています。View にはモデルではなくコレクションがあります。そのため、model.bind で目にする多くの例は適用できません。どうやら collection.bind は正当なバインドではありません。これが私のビューコードです。OrderedPrefs (コレクション) が変更されたときにビューの render 関数が呼び出されるようにするには、初期化に何を追加すればよいですか?

headerView = Backbone.View.extend({

        el: $('#' + targetdiv),
        collection: orderedPrefs,
        events: {
            "click .scheduleheader": "clicked"                               // dependency here on scheduler.js class naming .scheduleheader

        },
        initialize: function () {
            _.bindAll(this, "render");

        },
        render: function () {
            alert('render!!');
        },

…………

4

2 に答える 2

3

これらは初期化関数内で機能するはずです。

this.collection.on("add", this.render);
this.collection.on("remove", this.render);
this.collection.on("reset", this.render);

そうでない場合は、ビューに添付されたコレクションに問題があります。グローバルな「orderedPrefs」は使用しないでください。

バックボーン ドキュメントの状態:

新しいビューを作成するとき、渡したオプションは、後で参照できるように this.options としてビューに添付されます。モデル、コレクション、el、id、className、tagName、および属性など、渡された場合にビューに直接アタッチされる特別なオプションがいくつかあります。

ビューをインスタンス化するときは、次のようにコレクションを渡す必要があります。

new headerView({ collection: orderedPrefs });

コレクション モデルの変更を追跡する場合は、別のビューで行う必要があります。

var ModelView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.render();
        this.model.on("change",this.render);
    },
    render: function() {
        $(this.el).html("model view markup"); // you should use templating
        return this;
    }
});

var headerView = Backbone.View.extend({
    el: $('#' + targetdiv),
    initialize: function () {
        _.bindAll(this, "render");
        this.collection.on("add", this.render);
        this.collection.on("remove", this.render);
        this.collection.on("reset", this.render);
    },
    render: function () {
        var self = this;
        this.collection.each(function(collectionModel){
            var view = new ModelView({ model : collectionModel });
            $(self.el).append(view.el);
        });
    }
});
于 2012-10-24T07:26:27.780 に答える
1

collection.on「追加」イベントと「削除」イベントを使用してバインドできます。使用例については、追加の下のドキュメントを参照してください。

this.collection.on("add", this.render);

Backbone バージョン 0.9.0 以降を使用している場合は、同じステートメントで複数のイベントをバインドできます。

this.collection.on("add remove", this.render);

「バインド」は「オン」と同じように機能することにも注意してください。

bind と unbind は、jQuery のリードに従って、わかりやすくするために on と off に名前が変更されました。古い名前も引き続きサポートされます。

于 2012-10-23T22:46:18.907 に答える