ユーザーのすべての連絡先をHTMLリストに表示する連絡先バーに取り組んでいます。
私が持っているもの：
- UserModel-これは、ユーザー名と電子メールを含む単純なBackbone.Modelです。
- UserCollection-これは連絡先リストとして使用されます
- ContactsView-これはulの連絡先リストです
- ContactView-これはliとしてレンダリングされた単一の連絡先モデルです
私は現在、UserCollectionを取得する方法（および場所）と、単一のモデルを単一のContactViewアイテムに渡す方法について頭を悩ませています。
具体的なハードルは次のとおりです。
- UserCollectionをどこにフェッチして保存する必要がありますか
- 連絡先リストをレンダリングするにはどうすればよいですか
- 連絡先アイテムをレンダリングするにはどうすればよいですか
- fetch（{success：callback}）がコード構造を壊さないようにするにはどうすればよいですか？
私の現在のコードはこれです：
入り口：
// create a new instance of the contact list view
var view = new ContactsView();
// insert the rendered element of the contact list view in to the dom
$('div.contacts-body').html(view.render().el);
view.fetch({ success: view.loadContacts });
連絡先ビュー：
define(
['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {
var ContactsView = Backbone.View.extend({
tagName: "ul",
className: "contacts unstyled",
attributes: "",
// I am feeling uneasy hardcoding the collection into the view
initialize: function() {
this.collection = new UserCollection();
},
// this renders our contact list
// we don't need any template because we just have <ul class="contacts"></ul>
render: function() {
this.$el.html();
return this;
},
// this should render the contact list
// really crappy and unflexible
loadContacts: function() {
this.collection.each(function(contact) {
// create a new contact item, insert the model
var view = new ContactView({ model: contact });
// append it to our list
this.$el.append(view.render().el);
});
}
});
return ContactsView;
});
ContactView
define(
['jquery', 'underscore', 'backbone', 'text!templates/conversations/contact.html'],
function($, _, Backbone, ContactTemplate) {
var ContactView = Backbone.View.extend({
tagName: "li",
className: "contact",
attributes: "",
template:_.template(ContactTemplate),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
return ContactView;
});
誰かが私の4つのハードルについて私を助けてくれませんか。
良い例のリンクは大歓迎です。私は自分のコードスタイルをtodosリストに向けましたが、残念ながらtodosリストはそれほど高度ではありません...
更新されたコード：
define(
['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {
var ContactsView = Backbone.View.extend({
tagName: "ul",
className: "contacts unstyled",
attributes: "",
events: {
},
initialize: function() {
this.collection = new UserCollection();
this.collection.on('reset', this.render);
this.collection.fetch();
},
render: function() {
// in chromium console
console.log(this.el); // first: html, second: undefined
console.log(this.$el); // first: html in array, second: undefined
this.$el.empty(); // error on the called that this.$el is undefined
this.collection.each(function(contact) {
var view = new ContactView({ model: contact });
this.$el.append(view.el);
}.bind(this));
return this;
}
});
return ContactsView;
リセットがthis.renderを2回トリガーしている可能性がありますか？