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())); 
} 

}); 

UPDATE：コレクションの初期化と人口

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

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

UPDATE＃3：モデルの定義ここでは、対応するコレクション

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'); 
    } 

}); 

UPDATE＃2のコードはここに私のコードです

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;