6

初めて Backbone.js を学習していますが、トリガーからカスタム イベントを取得しようとして問題が発生しています (または、トリガーされたときの認識からのビューから)。

ここで私のコレクション コードを確認できます: https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main.js#L72-86collection:initこれは、初期化されるとカスタムイベントをトリガーします。

var Contacts = Backbone.Collection.extend({
    model: Contact,

    initialize: function(){
        this.trigger('collection:init');
        this.bind('add', this.model_added, this);
    },

    model_added: function(){
        console.log('A new model has been created so trigger an event for the View to update the <select> menu');
    }
});

しかし、後でそのイベントをリッスンしているビューで、関数を起動できませんpopulate: https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main. js#L90-107

var ContactsView = Backbone.View.extend({
    initialize: function(){
        console.log(contacts.models, 'get initial model data and populate the select menu?');
    },

    events: {
        'collection:init': 'populate',
        'change select': 'displaySelected'
    },

    populate: function(){
        console.log('populate the <select> with initial Model data');
    },

    displaySelected: function (event) {
        console.log('get model data and display selected user', event);
    }
});

私が間違っていることはありますか？

4

1 に答える 1

9

ビューのイベント ハッシュは、レンダリングされたビューの要素によって発生したイベントなど、DOMからビューにイベントをバインドするために使用されます。コレクションによって発生したイベントをリッスンするには、手動で設定する必要があります。

var ContactsView = Backbone.View.extend({
    initialize: function(){
        contacts.on("collection:init",this.populate,this);
    }
    ...
});

グローバルな連絡先変数を使用していることに注意してください。el の場合と同様に、Backbone メカニズムを使用してコレクションをコンストラクターに渡すことをお勧めします。

var ContactsView = Backbone.View.extend({
    initialize: function(){
        console.log(this.collection.models);
        this.collection.on("collection:init",this.populate,this);
    }
    ...
});

var contacts_view = new ContactsView({
    el: $('#view-contacts'),
    collection:contacts
});

@muがコメントで言ったように、コレクションの初期化メソッドでトリガーするため、イベントは何もしません。コレクションのコンストラクターによって自動的に呼び出されるため、ビューに何かをバインドする前に。呼び出し順序を視覚化するには、この Fiddle を参照してください: http://jsfiddle.net/yRuCN/

他の場所でトリガーするか、意図を正しく読んだ場合、(おそらく) 組み込みのリセットイベントを使用する必要があります。

var ContactsView = Backbone.View.extend({
    initialize: function(){
        this.collection.on("reset",this.populate,this);
    }
    ...
});

潜在的な用途の例については、http://jsfiddle.net/yRuCN/1/を参照してください。

于 2012-07-28T16:04:33.650 に答える