使用 Backbone.js 插入视图的正确方法答案

【问题标题】：Correct way to insert a view with Backbone.js使用 Backbone.js 插入视图的正确方法
【发布时间】：2011-07-03 03:33:03
【问题描述】：

我有一个简单的backbone.js 应用程序。我想将视图呈现到 HTML 页面的 DOM 中，该视图是模型的详细视图。我的 HTML 页面已经有我想要呈现视图的 DIV 元素。如果我尝试像这样呈现我的视图：

detailView = new RulesPanelView({model : @model})
$("#detail").html(detailView.render().el)

它失败了，我将 [Object HTMLDivElement] 插入 DOM，而不是我渲染的 HTML。

这是我让它工作的唯一方法，它看起来像一个 hack：

$("#detail").html('')
detailView = new RulesPanelView({model : @model})
$("#detail").append(detailView.render().el)

在渲染之前必须清空 DIV 的 HTML，这样我就不会在 #detail 中渲染多个视图，这就是 append 会发生的情况。

我这样创建的视图是不是太多了，只是在第一个代码段中替换 HTML 看起来更干净吗？

渲染这个视图的正确方法是什么？

【问题讨论】：

第一个代码段应该可以正常工作，因为这就是我在控制器中设置东西的方式。 $('#content').html(currentView.render().el)。 Arthur Debert 的解决方案也应该有效。你能给我们看看 RulesPanelView 的代码吗？

标签： backbone.js zepto

【解决方案1】：

您想要将已经插入的 DOM 节点作为构造函数的“el”选项传递给视图：

new RulesPanelView({el: $("#detail")});

这样，它就不会再次渲染。不过，您仍然需要确保视图的“渲染”方法能够从更新的模型中渲染正确的视图。

backbone documentation 提到这是避免一次渲染太多内容的好方法。

【讨论】：

是的，这确实有效。然而有一个问题。我在 RulesPanelView 中分配的任何事件都会在每次渲染时重新分配。因此，如果它渲染两次，则 DOM 仅包含最新的渲染，但 click 事件会触发两次。这些事件是使用视图中的事件哈希设置的。
不应在每个 render() 上重新分配任何事件。假设您只将事件放在视图上的 events: {}, 属性或 initialize 块中，则仅在初始化对象时才绑定事件。您应该知道，Backbone 中的事件块使用 JQuery 的 .live() 并注意 .bind()
看来不是这样的。每次重新渲染都会导致另一个事件被绑定。我希望它在渲染之前删除事件。认为我将在没有框架的情况下使用 Backbone 给我带来了无穷无尽的问题和问题，而且非常缺乏帮助。
如果你覆盖视图的“remove”方法，并使用 jQuery 的 remove 删除旧元素，假设你使用了 'live' 或 'delegate' 事件，你应该已经准备好了。
Backbone 使用来自 jquery 的委托，而不是实时的。

【解决方案2】：

我实际上在视图的render 方法中附加了in。如果您想在模型更改时重新渲染，这不起作用 - 但为此我添加了一个 refresh 方法，该方法在附加之前实际调用渲染。然后我将刷新绑定到模型更改（如果需要）。所以在我看来，我这样做：

render: function(){
    var markup = this.refresh();
    $(markup).appendTo('#some-selector');
    return this;
}, 
refresh: function(){
    return $(this.el).html($.mustache(this.template, this.model.toJSON()));
},

不确定这是否是“最好的”，但我认为它运作良好。我还看到你有一个集合绑定到一个视图，该视图循环遍历所有模型并呈现集合视图的“子视图”——这提供了一种比硬编码更好的编程方法。 .

【讨论】：

这不是 Backbone 文档推荐的 (documentcloud.github.com/backbone/#View-render)，并且正如您所注意到的，它会导致问题，例如在模型更改时附加两次，您必须解决问题。我也会担心这会导致与包含结构（#some-selector）的耦合。