javascript - 主干主体元素 View 未渲染

Question

我在主干 View 渲染方面遇到一些问题。有人能指出我的错误吗？

var BookView = Backbone.View.extend({
    template: _.template('<strong><%= title %></strong> - <%= author %>'),
    tagName: 'div',
    className: 'cover',
    id: '',
    initialize: function() {
        console.log('View initialized');
        this.render();
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var instance = new Book({
    title: 'Thinking, Fast and Slow',
    author: 'Daniel Kahneman',
    issued: '2011'
});
console.log(instance.get('title') + ' by ' + instance.get('author') + ' added to catalogue');

var something = new BookView({model: instance, el: $('body')});
something.render();

问题是，我正在阅读文档以及 Backbone Fundamentals 书，但没有明白为什么在 el: $('body') 之后 View 没有附加到 body 标记。

同时控制台中的 $('body').append(something.el); 工作完美，但并不让我觉得我理解框架概念。

Answer 1

为了简要扩展 @TJ 提到的内容，值得注意的是 el 和 $el 之间存在差异。

$el是对 View 元素的缓存 jQuery(或 Zepto)引用:(自 v0.9.0 开始)

A cached jQuery object for the view's element. A handy reference instead of re-wrapping the DOM element all the time.

this.el可以从 DOM 选择器字符串或元素解析:

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, this.el is an empty div

<小时/>

要让当前代码正常工作，您所需要做的就是删除 tagName、id 和 className 属性:

var BookView = Backbone.View.extend({
    template: _.template('<strong><%= title %></strong> - <%= author %>'),
    initialize: function() {
        this.render();
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

由于您是从 initialize 调用 render()，因此在初始化后无需再次调用它:

var something = new BookView({model: instance, el: $('body')});

<小时/>这是 Fiddle与您的工作代码