骨干基本视图

我发现骨干框架和我试图研究它，或多或少我理解模型，但我有一些问题与观点。我用模型，集合和视图创建了一个js文件，问题是我没有看到我的视图，错误在哪里？骨干基本视图

$(function(){ 

var Todo = Backbone.Model.extend({ 
    // Default todo attribute values 
    defaults: { 
    title: 'Default text', 
    completed: false 
    } 
}); 

var todo1 = new Todo(); 
var todo2 = new Todo({ 
    title: 'Todo 2' 
}); 
var todo3 = new Todo({ 
    title: 'Todo 3' 
}); 

var TodosCollection = Backbone.Collection.extend({ 
    model: Todo 
}); 
var todoList = new TodosCollection([todo1,todo2]); 

var TodoView = Backbone.View.extend({ 

    tagName: "li", 

    template: '#item-template', 

    events: { 
    }, 

    initialize: function() { 

     //precompilo il template 
     this.template = _.template($('#item-template').html()); 

     //forzo il contesto di questi metodi della view 
     _.bindAll(this, 'render', 'remove'); 

     //resto in ascolto nel caso il modello sia cancellato e rimuovo anche la view dal DOM 
     //.remove() è un metodo di default in Backbone.View 
     this.model.bind('destroy', this.remove); 

    }, 

    //metodo che stampa l'HTML della view 
    render: function() { 

     var data = this.model.toJSON(); 

     this.$el.html(this.template(data)); 

     return this; 
    } 


}); 

var TodoRoute = Backbone.Router.extend({ 

    routes : { 
     //questa è la route corrispondente all'home dell'applicazione 
     '*page' : 'defaultPage', 
     //una route parametrica 
     'todos/:id' : 'getToDo' 
    }, 
    defaultPage : function() { 
     new TodoView({model:todo2}); 
    }, 
    getToDo : function (id){} 
}); 

var todoRoute = new TodoRoute(); 
Backbone.history.start({ pushState : true}); 

});

的index.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Start</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="start.js"></script> 

</head> 
<body> 

<ul id="menu"> 
    <li><a href="#index">Index</a></li> 
    <li><a href="#todos">To Do</a></li> 
</ul> 

<div id="content"> 
</div> 

<!-- Item Template --> 

<script type="text/template" id="item-template"> 
    <div class="myItem"><%= title %></div> 
</script> 

</body> 
</html>

来源

2013-09-23 kikko088

实际上你需要把它添加到自己的页面，

defaultPage : function() { 
    var view = new TodoView({model:todo2}); 
    Backbone.$('#content').append(view.render().$el); 
},

来源

2013-09-23 15:43:46 Andrew

非常感谢你！ – kikko088

骨干基本视图

回答

相关问题