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

简短的anwser是el可以指向已经属于DOM的元素，如果你这样做，你不需要手动追加它。为此，您可以在创建视图实例时简单地传入引用，例如

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

这是稍长的版本。

主干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：渲染模板没有$（＆＃39; body＆＃39;）。附加？

1 个答案: