Backbone JS：渲染模板没有类似 $('body').append 的东西？

Question

使用外部模板，我试图将 Backbone JS 视图渲染到 DOM。不幸的是，我只得到一个空白屏幕，同时检查控制台确认一切正常。

要在 DOM 中获取呈现的模板，我必须执行类似 $('body').append(myView.render().el); 的操作，根据许多资源，这不是必需的。例如，TodoMVC 项目的 Backbone 实现中的 this view 没有包含任何类似 $('body').append 的东西，这让我相信我的代码中有些地方是错误的，但我找不到它。

我的 HTML 中的模板如下所示：

<script id="name-template" type="text/template">
    <%= name %> (<%=age %>)
</script>

这是应用程序代码：

var App = App || {};

App.Models = {};
App.Views = {};

App.Models.Person = Backbone.Model.extend({
    defaults: {
        name: 'Peter',
        age: 34
    }
});

App.Views.Person = Backbone.View.extend({
    tagName: 'p',
    template: _.template($('#name-template').html()),
    initialize: function() {
        console.log(this.model);
    }
});

App.personModel = new App.Models.Person();
App.personView = new App.Views.Person({model: personModel});
App.personView.render();

我必须更改什么才能在页面加载时向呈现的模板添加 DOM?

Answer 1

简短的回答是 el 可以指向已经是 DOM 一部分的元素，如果您这样做，则不需要手动附加它。为此，您可以在创建视图实例时简单地传递引用，例如

App.personView = new App.Views.Person({model: personModel, el: '#someElement'});
App.personView.render();

这是稍微长一点的版本。

A backbone el 实际上只是对 DOM 元素的引用，无论它是否已经附加到页面上，在这个意义上它确实没有任何不同然后是对 DOM 元素的常规引用。考虑以下普通 JavaScript 代码

var pElement = document.createElement("p");
var pElement = $('p'); //using jQuery

此时 pElement 包含对 DOM 元素的引用，但尚未附加到页面（尚未）。您附加到此 p 元素的任何内容都不会可见，直到您使用类似以下的内容将其附加到页面

document.body.appendChild(pElement);
$('body').append(pElement); //or using jQuery

如果您没有创建新的 p 元素，而是获得了对现有元素的引用，那么您对该元素所做的任何更改都会立即反映在页面上，

var pElement = document.getElementById('#myPElement');
var pElement = $('#myPElement'); //using jquery

此时您可以随意操作 pElement 而无需将其附加到页面，因为它已经是页面的一部分。

Backbone JS：渲染模板没有类似 $('body').append 的东西？

Backbone JS: Rendering template without something like $('body').append?

javascript

backbone.js