使用动态信息呈现视图

Question

首先，请原谅我的天真问题。我知道有一个简单的答案，但我目前正在同时学习JavaScript和BackBone，并遇到一些问题。

我只是试图从我的JavaScript文件的信息集合中添加一个表到我的视图。这里是我的js文件：

(function(window,app,$){ 

    app.views.itemsIndex = Backbone.View.extend({ 
     id:"items-index", 

     initialize:function(){ 

     }, 

     events:{ 

     }, 

     render:function(){ 
      template = new EJS({ 
       url:"js/templates/patron/items/itemsIndex.ejs" 
      }); 

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

      this.createDummies() 

      return this; 
     }, 

     createDummies:function(){ 

      var bookCollection = new app.collections.books(); 

      for (var i = 0; i < 10; i++) { 
       var book = new app.models.book({title : 'title ' + i}); 
       bookCollection.add(book); 

       var item = new app.views.itemsItem(); 
       this.$el.append(item.render().el); 
      }; 

      console.log(bookCollection); 
     } 
    }); 

})(window,window.circulationApp || {},$) 

我得到一个错误，当我试图渲染错误未捕获的ReferenceError的观点：书没有定义

下面

是我的EJS文件：

<td> 
    <div class="td-wrap"> 
     <%= book.escape('title') %></td> 
    </div><!-- .td-wrap --> 

有什么想法？

Answer 1

不明白整个事情，但是从我的理解要通过<td>元素

看起来EJS支持循环，那么为什么不直接将收集到的观点，并遍历渲染书籍的集合书籍？

<% for (var i = 0; i < books.length; i++) {%> 
    <%= books[i].escape('title'); %> 
<% } %> 

createDummies将返回集合：

createDummies: function() { 
    var bookCollection = new app.collections.books(); 
    for (var i = 0; i < 10; i++) { 
     var book = new app.models.book({title : 'title ' + i}); 
     bookCollection.add(book); 
    }; 
    return bookCollection; 
} 

以使其：

var tpl = new EJS({ 
    url:"js/templates/patron/items/itemsIndex.ejs" 
}); 

var booksCollection = this.createDummies(); 

this.$el.html(tpl.render({books: booksCollection})); 

理想的骨干，应只使用render方法来填补你的$el与HTML。