這個Backbone todo應用程序如何將所有元素渲染到頁面？

當我在我的終端中輸入open <this_filename.html>時，它會打開已在頁面上呈現的todolist型號列表頁面。怎麼樣？這個Backbone todo應用程序如何將所有元素渲染到頁面？

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>To-do App in Backbone.js</title> 

    <!-- ========= --> 
    <!-- CSS --> 
    <!-- ========= --> 
    <style type="text/css"> 
    /* Hides bullet points from todo list */ 
    #todoapp ul { 
     list-style-type: none; 
    } 
    </style> 
</head> 
<body> 
    <!-- ========= --> 
    <!-- Your HTML --> 
    <!-- ========= --> 

    <section id="todoapp"> 
    <header id="header"> 
     <h1>Todos</h1> 
     <input id="new-todo" placeholder="What needs to be done?" autofocus> 
    </header> 
    <section id="main"> 
     <ul id="todo-list"></ul> 
    </section> 
    </section> 
    <div> 
    <p>Find the tutorial and code in <a href="http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/">here</a></p> 
    </div> 

    <!-- Templates --> 
    <script type="text/template" id="item-template"> 
    <div class="view"> 
     <input class="toggle" type="checkbox"> 
     <label><%- title %></label> 
    </div> 
    </script> 

    <!-- ========= --> 
    <!-- Libraries --> 
    <!-- ========= --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script> 

    <!-- =============== --> 
    <!-- Javascript code --> 
    <!-- =============== --> 
    <script type="text/javascript"> 
    'use strict'; 

    var app = {}; // create namespace for our app 

    //-------------- 
    // Models 
    //-------------- 
    app.Todo = Backbone.Model.extend({ 
     defaults: { 
     title: '', 
     completed: false 
     } 
    }); 

    //-------------- 
    // Collections 
    //-------------- 
    app.TodoList = Backbone.Collection.extend({ 
     model: app.Todo, 
     localStorage: new Store("backbone-todo") 
    }); 

    // instance of the Collection 
    app.todoList = new app.TodoList(); 

    //-------------- 
    // Views 
    //-------------- 

    // renders individual todo items list (li) 
    app.TodoView = Backbone.View.extend({ 
     tagName: 'li', 
     template: _.template($('#item-template').html()), 
     render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; // enable chained calls 
     } 
    }); 

    // renders the full list of todo items calling TodoView for each one. 
    app.AppView = Backbone.View.extend({ 
     el: '#todoapp', 
     initialize: function() { 
     this.input = this.$('#new-todo'); 
     app.todoList.on('add', this.addAll, this); 
     app.todoList.on('reset', this.addAll, this); 
     app.todoList.fetch(); // Loads list from local storage 
     }, 
     events: { 
     'keypress #new-todo': 'createTodoOnEnter' 
     }, 
     createTodoOnEnter: function(e){ 
     if (e.which !== 13 || !this.input.val().trim()) { // ENTER_KEY = 13 
      return; 
     } 
     app.todoList.create(this.newAttributes()); 
     this.input.val(''); // clean input box 
     }, 
     addOne: function(todo){ 
     var view = new app.TodoView({model: todo}); 
     $('#todo-list').append(view.render().el); 
     }, 
     addAll: function(){ 
     this.$('#todo-list').html(''); // clean the todo list 
     app.todoList.each(this.addOne, this); 
     }, 
     newAttributes: function(){ 
     return { 
      title: this.input.val().trim(), 
      completed: false 
     } 
     } 
    }); 

    //-------------- 
    // Initializers 
    //-------------- 

    app.appView = new app.AppView(); 

    </script> 

</body> 
</html>

在代碼的底部，此行：app.appView = new app.AppView();實例化AppView。 reset函數是否自動調用？

我想我明白addAll和addOne方法是如何定義的，但我想知道是什麼把它們放在第一位？ todoList如何在頁面上呈現？

來源

2016-12-14 Jwan622

new app.AppView();

這就是initialize函數app.AppView。

initialize: function() { 
    // this is where addAll is called 
    app.todoList.on('add', this.addAll, this); 
    app.todoList.on('reset', this.addAll, this); 
    app.todoList.fetch(); // Loads list from local storage 
},

監聽器綁定到集合app.todoList的add和reset事件，並使用this.addAll作爲回調。

當在集合上調用.fetch()時，它向其添加新模型，觸發add事件，然後觸發回調this.addAll。

雖然在我看來，與最新版本的主幹，它應使用listenTo這是一個更好的版本的on：

initialize: function() { 
    this.listenTo(app.todoList, { 
     'add': this.addOne, // on the add event, only use addOne 
     'reset': this.addAll // on collection reset, re-render everything 
    }); 
    app.todoList.fetch(); // Loads list from local storage 
},

listenTo vs on

來源

2016-12-14 19:10:38

你是最好的。非常感謝！ – Jwan622

這個Backbone todo應用程序如何將所有元素渲染到頁面？

回答

相關問題