6

我是第一次学习 Backbone.js，我在尝试从触发中获取自定义事件（或从视图中识别它何时被触发）时遇到问题？

您可以在此处查看我的 Collection 代码：https ://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main.js#L72-86 ，它在初始化时会触发自定义collection: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);
    }
    ...
});

请注意，您使用的是全局联系人变量，我建议您使用 Backbone 机制并将您的集合传递给构造函数，就像使用 el 一样：

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 在评论中所说，您的事件不会做任何事情，因为您在集合的初始化方法中触发它，该方法由集合的构造函数自动调用，因此在您可以绑定视图中的任何内容之前。请参阅此小提琴以可视化调用顺序：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 回答