我最初尝试使用模板来呈现视图，但在后续调用中更新视图，当它是文档的一部分时。
我的应用页面看起来有点像
<body>
<!-- ... -->
<div id="view_placeholder"/>
<!-- ... -->
</body>
在伪代码中，我想做这样的事情
Backbone.View.extend({
// ...
render: function() {
if (this.el *IS NOT A CHILD OF document*) {
// render the contents from the template
} else {
// update the content visibility based on the model
}
},
// ...
});
这样做的原因是模板包含相当多的节点，并且为每个更改重新生成它是不切实际的。
我已经探索了一些数据绑定库，例如铆钉.js但它们不适合模板：模型关系。
我注意到的一件事是，this.el.parentNode==null在我将其添加到文档中之前，但我不确定这是一个确定的测试，无论如何，如果我将此视图包装在另一个视图中，那么该测试将变得不那么有用(或者也许我过于谨慎，因为一旦在另一个视图的 el 中，我已经渲染了我的子模板。
我可以看到的另一个选项是使用字段来跟踪渲染状态，例如
Backbone.View.extend({
//
templateRendered:false,
// ...
render: function() {
if (!this.templateRendered) {
// render the contents from the template
this.templateRendered = true;
} else {
// update the content visibility based on the model
}
},
// ...
});
但这对我来说感觉很笨拙。
所以我的问题是：
跟踪我已经完全渲染了模板，因此只需要调整渲染的模板而不是重新渲染它(并重新插入所有子视图)这一事实的最佳方法是什么？
我认为惯用的主干方法是仅在您想要完整渲染时才在视图上调用完整render()，并使用模型更改事件绑定来调用渲染视图较小部分的子渲染函数。
var AddressView = Backbone.View.extend({
initialize: function (options) {
Backbone.view.prototype.initialize.call(this, options);
_.bindAll(this)
options.model.on('change:name', this.renderName);
options.model.on('change:street', this.renderStreet);
options.model.on('change:zipCode', this.renderZipCode);
},
renderName: function (model) {
this.$el.find("#name").text(model.get("name"));
},
renderZipCode: function (model) {
this.$el.find("#zipcode").text(model.get("zipCode"));
},
renderStreet: function (model) {
this.$el.find("#stree").text(model.get("street"));
},
render: function () {
//Populate this.el with initial template, subviews, etc
//assume this.template is a template function that can render the main HTML
this.$el.html(this.template(model));
this.renderName(this.model);
this.renderZipCode(this.model);
this.renderStreet(this.model);
return this;
}
});
如上所述的代码无疑是乏味的。我个人会重新考虑击退.js或铆钉.js，但我相信上面的模式是规范的香草骨干.js方法。
我会避免渲染视图，直到它的元素即将入。在任何情况下，您都可以通过检查视图元素的父元素来找出答案，即
this.$el.parent()
如果this.$el不是文档的一部分，则应为空。