gpt4 book ai didi

javascript - 确定 Backbone.View 的 this.el 是附加到文档还是 float 的正确方法是什么?

转载 作者:行者123 更新时间:2023-11-30 05:53:49 24 4
gpt4 key购买 nike

我正在尝试使用模板来最初呈现 View ,但当它是文档的一部分时在后续调用中更新 View 。

我的应用页面看起来有点像

<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
}
},
// ...
});

这样做的原因是模板包含相当多的节点并且为每个更改重新生成它是不切实际的。

我探索了一些数据绑定(bind)库,例如rivets.js但它们不太适合模板:模型关系。

我注意到的一件事是 this.el.parentNode==null 在我将它添加到文档之前,但我不确定这是一个确定的测试,无论如何如果我将此 View 包装在另一个 View 中,然后该测试变得不那么有用(或者我可能过于谨慎,因为曾经在另一个 View 的 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
}
},
// ...
});

但这对我来说感觉很老套。

所以我的问题是:

跟踪我已完全渲染模板并因此只需要调整渲染模板而不是重新渲染它(并重新插入所有 subview )这一事实的最佳方法是什么?

最佳答案

我认为惯用的主干方法是只在您想要完整渲染时在您的 View 上调用完整的 render(),并使用模型更改事件绑定(bind)来调用渲染更小的子渲染函数部分 View 。

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;
}
});

上面的代码无疑是乏味的。我会重新考虑 knockback.jsrivets.js ,就我个人而言,但我相信上面的模式是规范的 vanilla backbone.js 方法。

关于javascript - 确定 Backbone.View 的 this.el 是附加到文档还是 float 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13159319/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com