javascript - 数据不会加载到模板中

Question

我正在使用下面的代码尝试将一组书籍加载到 HTML 模板中。

数据结果确实显示在我的控制台中，但我不明白为什么它们没有显示在我的 HTML 模板中。

我从登陆页面开始，并通过此调用创建以下 View :

var sv = new BookSearchView();

其中 BookSearchView.js 是以下代码:

define(['underscore', 'backbone', 'jquery', 'text!BookSearchResults.html', 'text!Book.html', 'jquery-ui'],

function (_, Backbone, $, tmplBooks, tmplBook) {
'use strict';

//book model
var Book = Backbone.Model.extend({
    urlRoot: 'api/search'
});

//book collection with URL to web query [this part works fine]
var BookCollection = Backbone.Collection.extend({
    model: Book,
    url: '/api/search/fantasy'   //this loads a JSON string of fantasy books

});

//create my book collection
var Books = new BookCollection();
Books.fetch().done(function() {
});

 //main view
 return Backbone.View.extend({
    el: '#search_container',
    className: 'Books',
    template: _.template(tmplBooks, null, { variable: 's' }),

    initialize: function () {
        this.BookCollection = Books;
    },

    render: function () {
        //loop through my book collection
        this.BookCollection.each(function(e) {
            this.renderBook(e);
        }, this);

    return this;
    }

        //render each book in the collection
    renderBook: function (e) {
        var self = this;
        var bookView = new BookView({
            model: e,
            parent: self,
        });
        this.$('#book_container').append(bookView.render().$el);
        console.log('Book view: ', bookView);  //I can see the data in my console!
    }

});

//book view
var BookView = Backbone.View.extend({
    tagName: 'div',
    className: 'Book',
    template: _.template(tmplBook),

    initialize: function (args) {
        this.parent = args.parent;
        this.listenTo(this.model, 'sync change', this.render);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});


});

<!--tmplBooks = BookSearchResults.html = search results template-->
<div id="book_container">
    <div class="Books">
        Search Results:
    </div>
</div>

<!--tmplBook = Book.html = individual book template-->
<div class="Book"></div>

Answer 1

我可能是错的，但似乎在您的模板中您正在传递 model.toJSON 对象，但模板中没有变量来使用该值或呈现它。所以每次模板都会返回"<div class="Book"></div>"这将不会在 html 页面上显示任何内容。