Backbone 正文元素视图未呈现

Question

我在 Backbone 视图渲染方面遇到了一些问题。谁能指出我的错误？

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 基础知识书籍，但不明白为什么在 el: $('body') 视图未附加到 body 标记之后。

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

Answer 1

您不能将 el 属性与 tagName.

等其他属性一起使用

el 属性用于指向视图关联的 DOM 中的现有元素。

因此，如果您在选项中传递 el: $('body')，然后在视图中指定 tagName: 'div'，显然它没有意义。

因此，如果您希望 backbone 为视图创建新元素，请使用 tagName、className、id 等属性。然后，您应该手动将指向新创建的元素的此视图附加到 DOM.

否则使用 el 属性指向 DOM 中已经存在的元素。

Answer 2

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

$el is a cached jQuery (or Zepto) reference to the view's element: (Since 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 和你的工作代码

Backbone 正文元素视图未呈现

Backbone Body element View not Rendering

javascript

render

el

backbone.js