backbone.js查看事件不發射

Question

我是一個backbone.js n00b，所以請忍受我。

我想動態生成一個使用backbone.js的聯繫人列表，並附加一個onclick事件處理程序給每個，都無濟於事。我的視圖渲染正常，但點擊事件沒有註冊。這裏是我的代碼：

App.Views.Contact = Backbone.View.extend({ 

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

events: { 
    'click': 'select', 
}, 

select: function(event) { 
    console.log('contact selected'); 
}, 

render: function() { 
    $('#contacts').append(tmplContact(this.model.toJSON())); 
} 

}); 

更新：這裏是相應的收集

App.Collections.Contact = Backbone.Collection.extend({ 

    initialize: function() { 
    this.bind('reset', function() { 
     console.log('COLLECTION RESET'); 
    }); 
    }, 

    model: App.Models.Contact, 

    comparator: function(model) { 
    return model.get('name'); 
    } 

}); 

更新＃2的代碼：集合初始化和人口

App.Collections.roster = new App.Collections.Contact; 

function getContacts() { 
    socketRequest('friends', function(data) {App.Collections.roster.reset(data)}); 
} 

更新＃3：模型定義

App.Models.Contact = Backbone.Model.extend({ 
    initialize: function() { 
    this.set({id: this.get('token')}); 
    this.set({avatar: parseAvatar(this.get('avatar'))}); 
    this.set({name: parseName(this.toJSON())}); 
    this.set({view: new App.Views.Contact({model: this})}); 
    }, 

    defaults: { 
    username: '' 
    } 
}); 

Answer 1

您需要使用View.el屬性才能使事件正常工作。

App.Collections.Contact = Backbone.Collection.extend({ 

    initialize: function() { 
     this.bind('reset', function() { 
      console.log('COLLECTION RESET'); 
     }); 
    }, 

    model: App.Models.Contact, 

    comparator: function(model) { 
     return model.get('name'); 
    }, 

    render: function() { 
     ; 
    } 

}); 

App.Views.Contacts = Backbone.View.extend({ 

    el: '#contacts', 

    initialize: function() { 
     this.collection = new App.Collection.Contact; 
     this.collection.bind('reset', this.render, this); 

     var that = this; 
     socketRequest('friends', function(data) { 
      this.reset(data); 
     }); 
    }, 

    render: function() { 
     $(this.el).html('put your template here'); 
     this.collection.each(this.addOne, this); 
     return this; 
    }, 

    addOne: function(contact) { 
     var view = new App.Views.Contact({model: contact}); 
     contact.view = view; // in case you need the ref on the model itself 
     $(this.el).append(view.render().el); 
    } 

}); 

App.Views.Contact = Backbone.View.extend({ 

    el: '', 

    tagName: 'div', 

    events: { 
     'click': 'select', 
    }, 

    select: function(event) { 
     console.log('contact selected'); 
    }, 

    render: function() { 
     $(this.el).html(htmltmplContact(this.model.toJSON())); 
     return this; 
    } 

}); 

小的提升你的模型代碼：
（！我刪除視圖創建的通知，這很重要）

App.Models.Contact = Backbone.Model.extend({ 

    parse: function(c) { 
     c.id = c.token; 
     c.avatar = parseAvatar(c.avatar); 
     c.name = parseName(c); 
     return c; 
    }, 

    defaults: { 
     username: '' 
    } 
}); 

，並踢東西了：

App.Views.roster = App.Views.Contacts;