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支持循环，那么为什么不直接将Collection插入到视图中，并循环遍历书籍？

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

createDummies将返回Collection：

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}));

理想情况下，在Backbone中，只应使用render方法用HTML填充$el。

使用动态信息呈现视图

1 个答案: