backbone.js – 无法识别骨干自定义事件触发器?

前端之家收集整理的这篇文章主要介绍了backbone.js – 无法识别骨干自定义事件触发器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我第一次学习Backbone.js而且我遇到了一个问题,试图从触发中获取自定义事件(或者从视图中识别出它被触发时)?

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

但是后来在我的View中,我正在听那个事件,我无法将函数填充到: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);
    }
});

我有什么想法我做错了吗?

解决方法

视图中的事件哈希用于将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);
    }
    ...
});

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

正如@mu在评论中所说的那样,你的事件将不会做任何事情,因为你在集合的initialize方法中触发它,因此在你可以绑定视图中的任何东西之前,集合的构造函数自动调用它.请参阅此小提琴以可视化呼叫顺序:http://jsfiddle.net/yRuCN/

在别处触发它,或者,如果我正确读出你的意图,你(可能)想要使用内置的重置事件:

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

有关潜在用途的示例,请参见http://jsfiddle.net/yRuCN/1/.

猜你在找的JavaScript相关文章