Javascript Backbone.js应用程序未呈现视图

几天前我找到了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;
});

$（函数（）{
//接触模型
Contact=Backbone.Model.extend({
//联系人默认值
默认值：{
名字：“名字”，
姓：“姓”，
电话：'电话号码'
},
//构造函数（初始化）
//确保每个联系人都有名字、姓氏和电话
初始化：函数（）{
如果（！this.get（“first_name”））{
set（{“first\u name”：this.defaults.first\u name}）；
}
如果（！this.get（“姓氏”））{
set（{“last_name”：this.defaults.last_name}）；
}
如果（！this.get（“电话”））{
set（{“phone”：this.defaults.phone}）；
}
}
});
//联系人收集
//该集合由本地存储支持
ContactList=Backbone.Collection.extend({
//模型
型号：Contact，
//将所有联系人保存在“联系人”命名空间下的localstorage中
本地存储：新存储（“联系人”）
});
//创建联系人的全局集合
联系人=新联系人列表；
//联系人视图
ContactView=Backbone.View.extend({
标记名：“li”，
模板：35;.template（$（35; item_template”）.html（），
活动：{
单击“联系人删除”：“删除联系人”
},
初始化：函数（）{
this.bind（'change'，this.render，this）；
this.bind（'destroy'，this.remove，this）；
},
render:function（）{
$（this.el）.html（this.template（this.model.toJSON（））；
这是setContent（）；
归还这个；
},
setContent:function（）{
var first_name=this.model.get（“first_name”）；
var last_name=this.model.get（“last_name”）；
var phone=this.model.get（“phone”）；
变量名称=名字+“”+姓氏；
这是.$（'.contact name'）.html（name）；
此.$（'.contact phone'）.html（电话）；
},
删除：函数（）{
$（this.el）.remove（）；
},
删除联系人：函数（）{
this.model.destroy（）；
}
});
//应用程序
AppView=Backbone.View.extend({
el:$（“#联系应用程序”），
活动：{
“单击#新建联系人#保存按钮”：“创建联系人”
},
初始化：函数（）{
Contacts.bind（“add”，this.addOne，this）；
Contacts.bind（“reset”，this.addAll，this）；
Contacts.fetch（）；
},
//通过创建单个联系人项目的视图，将其添加到列表中，然后
//将其元素附加到“
”。
addOne：功能（联系人）{
var view=新的ContactView（{model:contact}）；
此.$（“#联系人列表”）.append（view.render（）.el）；
},
//一次添加**联系人**集合中的所有项目。
addAll:function（）{
联系人。每个（此。添加一个）；
},
//生成新联系人项目的属性。
newAttributes:function（）{
返回{
first_name:this.$（'#first_name'）.val（），
姓氏：this.$（“#姓氏”）.val（），
电话：this.$（'#phone'）.val（）
};
},
createContact:function（）{
Contacts.create（this.newAttributes（））；
//重置表单
本.$（'first#u name'）.val（''）；
这是.val（“”）；
这个.$（'#phone'）.val（''）；
}
});
//最后，通过创建**应用**开始工作。
var App=新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看到，但视图没有更新。我是backbone.js的新手。

---

问题是，没有javascript错误。

在模型上，

默认值

应该考虑默认值，可能不需要

初始化

函数；如果我错了，有人纠正我

在ContactView上，您可能必须在

初始化方法中将渲染线更改为此：

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

在模型上，
默认值
应该考虑默认值，可能不需要
初始化
函数；如果我错了，有人纠正我

在ContactView上，您可能必须在
初始化方法中将渲染线更改为此：

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

尝试使用“add”而不是“create”将模型添加到集合中（我认为“create”方法不会触发“add”事件）

而不是

    Contacts.create(this.newAttributes());

使用

要将模型保存到本地存储，可以调用save方法

addOne: function(contact) {

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

编辑：

另一件事是检查“initialize”方法的拼写，我认为应该是“initialize”

这里有一个问题，我没有将其保存到JSFIDLE中的localStorage，但您应该可以使用它。
尝试使用“添加”而不是“创建”将模型添加到集合中（我认为“添加”事件不是由“创建”方法触发的）

而不是

    Contacts.create(this.newAttributes());

使用

要将模型保存到本地存储，可以调用save方法

addOne: function(contact) {

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

编辑：

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