Question

我在Backbone 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

您不能将el属性与tagName等其他属性一起使用。

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

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

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

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

Answer 2

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

$el是对视图元素的缓存jQuery（或Zepto）引用:(自v0.9.0起）

视图元素的缓存jQuery对象。一个方便的参考而不是一直重新包装DOM元素。

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

this.el可以从DOM选择器字符串或Element中解析出来; 否则，它将从视图tagName，className，id创建和attributes属性。如果未设置，则this.el为空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;
    }
});

由于您从render()拨打initialize，因此初始化后无需再次呼叫：

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

<小时/> 这是Fiddle，其中包含您的工作代码

Backbone Body元素视图无渲染

2 个答案: