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