Question

First, please excuse my naive question. I know there a simple answer, but I am currently learning JavaScript and BackBone simultaneously, and am running into a few problems.

I am simply trying to add a table to my view from a collection of info from my javascript file. Here is my js file:

(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 || {},$)

I get an error when I try to render the view with the error Uncaught ReferenceError: book is not defined

below is my ejs file:

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

Any thoughts?

Answer 1

Don’t understand the whole thing, but from my understanding you want to render a Collection of Books via <td> elements

Looks EJS supports loops, so why not insert the Collection directly into the view, and loop over books ?

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

createDummies would return the 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;
}

To render it :

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

var booksCollection = this.createDummies();

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

Ideally in Backbone only the render method should be used to fill your $el with HTML.