Backbone.js 主干脚本不'；行不通_Backbone.js

Backbone.js 主干脚本不'；行不通

backbone.js

Backbone.js 主干脚本不'；行不通,backbone.js,Backbone.js,我不熟悉主干框架，这是我的第一个应用程序。我在浏览器中看不到应用程序视图的任何渲染。我已经检查了错误控制台，没有发现任何错误。你们能帮我看看吗？我代表我感谢您抽出时间，并提前表示感谢 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://ajax.googleapis.

我不熟悉主干框架，这是我的第一个应用程序。我在浏览器中看不到应用程序视图的任何渲染。我已经检查了错误控制台，没有发现任何错误。你们能帮我看看吗？我代表我感谢您抽出时间，并提前表示感谢

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script id="contactTemplate" type="text/template">
    <h1> <%= name %> </h1>
    <dl>
        <dt> <%= address %> </dt>
        <dt> <%= tel %> </dt>
        <dt> <%= email %> </dt>
        <dt> <%= type %> </dt>
    </dl>
</script>
<script>
  // Your code goes here
 (function ($) {

 /* Dummy JSON DataSet */   
 var contacts = [
                 {name:"Test1",address:"Test Address",tel:"0123",email:"test@test.com",type:"family"},
                 {name:"Test2",address:"Test Address",tel:"01234",email:"test@test.com",type:"friends"},
                 {name:"Test3",address:"Test Address",tel:"012345",email:"test@test.com",type:"office"}
                 ];

 /* Defining Model */ 
 var Contact = Backbone.Model.extend({
    defaults:{
        name:'',
        address:'',
        tel:'',
        email:'',
        type:''
    }
    });

 /* Defining Collection (Set of Models) */
 var Directory = Backbone.Collection.extend({
    model:Contact
    });

 /* View for rendering indivijual Model*/
 var ContactView = Backbone.View.extend({
    tagName:'div',
    className:'contact-container',
    template:$('#contactTemplate').html(),
    render:function(){
        var tmpl = _.template(this.template);        
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
    });

 /* View for rendering collection of Models */
 var DirectoryView = Backbone.View.extend({
    el:$("#contacts"),
    intialize:function(){        
        this.collection = new Directory(contacts);
        this.render();
    },
    render:function(){
        var that = this;
        _.each(this.collection.models, function(item){
            this.renderContact(item);
            },this);
    },
    renderContact:function(item){
        var contactView = new ContactView({
            model:item
        });        
        this.$el.append(contactView.render().el);
    }
    });

 /* Initializing the view */
 var directory = new DirectoryView(); 
} (jQuery));
</script>
</head>
<body>
<div id="contacts">    
</div>
</body>
</html>


标题
//你的密码在这里
（函数（$）{
/*伪JSON数据集*/
var触点=[
{姓名：“测试1”，地址：“测试地址”，电话：“0123”，电子邮件：test@test.com，键入：“family”}，
{姓名：“测试2”，地址：“测试地址”，电话：“01234”，电子邮件：test@test.com，键入：“friends”}，
{姓名：“测试3”，地址：“测试地址”，电话：“012345”，电子邮件：test@test.com，键入：“office”}
];
/*定义模型*/
var触点=主干.Model.extend({
默认值：{
名称：“”，
地址：''，
电话：''，
电子邮件：“”，
类型：“”
}
});
/*定义集合（模型集）*/
var Directory=Backbone.Collection.extend({
型号：联系人
});
/*用于渲染单个模型的视图*/
var ContactView=Backbone.View.extend({
标记名：'div'，
类名：'contact-container'，
模板：$（'#contactTemplate'）.html（），
render:function（）{
var tmpl=wu.template（this.template）；
this.el.html（tmpl（this.model.toJSON（））；
归还这个；
}
});
/*用于渲染模型集合的视图*/
var DirectoryView=Backbone.View.extend({
el:$（“#联系人”），
初始化：函数（）{
this.collection=新目录（联系人）；
这个。render（）；
},
render:function（）{
var=这个；
_.每个（此.collection.models、函数（项）{
本合同项下的合同；
}，这个）；
},
renderContact:函数（项）{
var contactView=新的contactView({
型号：项目
});        
这是.el.append（contactView.render（）.el）；
}
});
/*初始化视图*/
var directory=new DirectoryView（）；
}（jQuery））；

当心

 (function ($) {...})(jQuery)

不能保证在DOM就绪时执行代码。在呈现

DirectoryView

时，

尚不可用，因此

$el

也未定义

将脚本放在

之后或放入document.ready将解决您的问题

这里还有一个输入错误：

    el:$("#contacts"),
    intialize: function(){    // <- initialize: function()    
        this.collection = new Directory(contacts);
        this.render();
    }

el:$（“#联系人”），
初始化：函数（）{/
 (function ($) {...})(jQuery)

无法保证在DOM就绪时执行您的代码。在呈现DirectoryView
时，
尚不可用，因此$el
也未定义
将脚本放在
之后或放入document.ready将解决您的问题
这里还有一个输入错误：
    el:$("#contacts"),
    intialize: function(){    // <- initialize: function()    
        this.collection = new Directory(contacts);
        this.render();
    } 

el:$（“#联系人”），
initialize:function（）{/@akoskm的答案是正确的，我对您的代码做了一些更改，如下所示：
ContactView = Backbone.View.extend({
    tagName: 'div',
    className: 'contact-container',
    template: $('#contactTemplate').html(),
    render: function(){
       var tmpl = _.template(this.template,this.model.toJSON());        
       this.$el.html(tmpl);
       return this;
   }
});


DirectoryView = Backbone.View.extend({
    el: "#contacts",
    initialize: function(options){        
        contacts = options.contacts
        this.collection = (new Directory(contacts)).models;
        this.render();
    },
    render: function(){
        var that = this;
        _.each(this.collection, function(item){
            this.renderContact(item);
            },this);
    },
    renderContact: function(item){
        var contactView = new ContactView({
            model: item
        });
        this.$el.append(contactView.render().el);
    }
});

@akoskm的答案是正确的，我对您的代码做了一些修改，如下所示：
ContactView = Backbone.View.extend({
    tagName: 'div',
    className: 'contact-container',
    template: $('#contactTemplate').html(),
    render: function(){
       var tmpl = _.template(this.template,this.model.toJSON());        
       this.$el.html(tmpl);
       return this;
   }
});


DirectoryView = Backbone.View.extend({
    el: "#contacts",
    initialize: function(options){        
        contacts = options.contacts
        this.collection = (new Directory(contacts)).models;
        this.render();
    },
    render: function(){
        var that = this;
        _.each(this.collection, function(item){
            this.renderContact(item);
            },this);
    },
    renderContact: function(item){
        var contactView = new ContactView({
            model: item
        });
        this.$el.append(contactView.render().el);
    }
});