[英]Backbone.js app not rendering view
几天前,我找到了bone.js,尽管我的JavaScript技能不是很好,但我发现它是一个漂亮的javascript开发代码工具。 但是,在阅读了文档之后,我决定编写一个简单的联系人应用程序。 我将联系人数据保存在浏览器的本地存储中。 这是代码//我的联系人应用程序的源代码
$(function() {
//Contact Model
Contact = Backbone.Model.extend({
//Contact Defaults
defaults : {
first_name : 'First Name',
last_name : 'Last Name',
phone : 'Phone Number'
},
//Constructor(intialize)
//Ensuring each contact has a first_name,last_name,phone
intialize: function(){
if(!this.get("first_name")) {
this.set({"first_name":this.defaults.first_name});
}
if(!this.get("last_name")) {
this.set({"last_name":this.defaults.last_name});
}
if(!this.get("phone")) {
this.set({"phone":this.defaults.phone});
}
}
});
//Contact Collection
//The collection is backed by localstorage
ContactList = Backbone.Collection.extend({
//Model
model : Contact,
//Save all contacts in localstorage under the namespace of "contacts"
localStorage: new Store("contacts")
});
//Create global collection of Contacts
Contacts = new ContactList;
//Contact View
ContactView = Backbone.View.extend({
tagName : "li",
template: _.template($("#item_template").html()),
events : {
"click span.contact-delete": "delete_contact"
},
intialize: function(){
this.bind('change',this.render,this);
this.bind('destroy',this.remove,this);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
this.setContent();
return this;
},
setContent: function() {
var first_name = this.model.get("first_name");
var last_name = this.model.get("last_name");
var phone = this.model.get("phone");
var name = first_name+" "+last_name;
this.$('.contact-name').html(name);
this.$('.contact-phone').html(phone);
},
remove: function() {
$(this.el).remove();
},
delete_contact: function() {
this.model.destroy();
}
});
//The Application
AppView = Backbone.View.extend({
el: $("#contact-app"),
events : {
"click #new-contact #save-button": "createContact"
},
intialize: function() {
Contacts.bind("add", this.addOne, this);
Contacts.bind("reset", this.addAll, this);
Contacts.fetch();
},
// Add a single contact item to the list by creating a view for it, and
// appending its element to the `<ul>`.
addOne: function(contact) {
var view = new ContactView({model: contact});
this.$("#contact-list").append(view.render().el);
},
// Add all items in the **Contacts** collection at once.
addAll: function() {
Contacts.each(this.addOne);
},
// Generate the attributes for a new Contact item.
newAttributes: function() {
return {
first_name : this.$('#first_name').val(),
last_name : this.$('#last_name').val(),
phone : this.$('#phone').val()
};
},
createContact: function() {
Contacts.create(this.newAttributes());
//Reset Form
this.$('#first_name').val('');
this.$('#last_name').val('');
this.$('#phone').val('');
}
});
// Finally,kick things off by creating the **App**.
var App = new AppView;
});
这是我的html来源
<div id="contact-app">
<div class="title">
<h1>Contacts App</h1>
</div>
<div class="content">
<div id="new-contact">
<input name="first_name" placeholder="First Name" type="text" id="first_name"/>
<input name="last_name" placeholder="Last Name" type="text" id="last_name" />
<input name="phone" placeholder="Phone Number" type="text" id="phone" />
<button id="save-button">Create Contact</button>
</div>
<div id="contacts">
<ul id="contact-list">
</ul>
</div>
<div id="contact-stats"></div>
</div>
</div>
<script type="text/template" id="item_template">
<div class="contact">
<div class="contact-name"></div>
<div class="contact-phone"><div>
<span class="contact-delete"></span>
</div>
</script>
联系人数据已保存在本地存储中,我可以通过Firebug看到它,但视图未更新。 对ebone.js来说是新手。 有什么问题,没有javascript错误。
尝试使用“ add”而不是“ create”将模型添加到集合中(我不认为“ create”方法会触发“ add”事件)。
代替
Contacts.create(this.newAttributes());
采用
Contacts.add(this.newAttributes());
要将模型保存到本地存储,可以调用save方法
addOne: function(contact) {
var view = new ContactView({model: contact});
contact.save();
this.$("#contact-list").append(view.render().el);
},
编辑:
另一件事是检查您的“初始化”方法的拼写,我认为它应该是“初始化”。
这是一个jsFiddle ,我没有将它保存到jsfiddle中的localStorage中,但这应该对您有用。
在模型上, defaults
应照顾默认值,可能不需要initialize
函数; 如果我错了,有人对此进行纠正。
在ContactView上,您可能必须在initialize
方法中将渲染线更改为此:
this.model.bind('change', _.bind(this.render, this));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.