Backbone.js应用程序没有渲染视图

Question

几天前我发现了backbone.js，我发现它的JavaScript开发的一个漂亮的代码工具，虽然我的JavaScript技能并不好。 然而，在阅读文档后，我决定编写一个简单的联系人应用程序。 我将联系人数据保存在浏览器localstorage上。 这是代码 //源代码我的联系人应用程序

$(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> 

的联系人数据被保存在本地存储空间，我可以通过萤火虫看到，但该视图不会更新。对于backbone.js是新的。 什么问题，没有javascript错误。

Answer 1

尝试使用“添加”，而不是“创造”添加模型到集合（我不t认为'add'事件被'create'方法触发）。

而不是

Contacts.create(this.newAttributes()); 

使用

Contacts.add(this.newAttributes()); 

保存模型到本地存储可以调用保存方法

addOne: function(contact) { 

     var view = new ContactView({model: contact}); 
     contact.save(); 
     this.$("#contact-list").append(view.render().el); 
    }, 

编辑：

另一件事检查你的“初始化”方法的拼写，我认为它应该是“初始化”。

这是jsFiddle，我没有将它保存到jsfiddle中的localStorage中，但那应该适用于您。

Answer 2

在模型上，defaults应该照顾默认值，initialize函数可能不需要;有人纠正我，如果我错了。

在您ContactView，您可能需要改变你的渲染线，这在您的initialize方法：

this.model.bind('change', _.bind(this.render, this));