1

Backbone Framework は初めてで、これが初めてのアプリです。ブラウザでアプリのビューのレンダリングを確認できませんでした。エラーコンソールを確認しましたが、エラーは見つかりませんでした。見て、私を助けてくれませんか？私に代わって時間を割いていただき、ありがとうございます。

<!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>
4

2 に答える 2