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

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

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

它失败了，我将[Object htmldevelment]插入到DOM中，而不是我的呈现HTML

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

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

在渲染之前必须清空DIV的HTML，这样我就不会在detail中渲染多个视图，而append就是这样

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

---

呈现此视图的正确方法是什么？

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

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

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

---

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

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

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

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

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

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

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

我不确定这是不是最好的，但我认为效果不错。我还看到了一个集合绑定到一个视图，该视图在所有模型中循环并呈现集合视图的子视图-这提供了一种比硬编码更好的编程方法，而硬编码则是附加在视图的呈现方法中。

我实际上是在视图的呈现方法中附加的。如果您希望在模型更改时重新渲染，则此方法不起作用，但为此，我添加了一个刷新方法，该方法在附加之前渲染实际调用。然后，如果需要，我将刷新绑定到模型更改。因此，在我看来，我这样做：

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

---

我不确定这是不是最好的，但我认为效果不错。我还看到了一个集合绑定到一个视图，该视图在所有模型中循环，并呈现集合视图的子视图-这提供了一种比硬编码更好的编程方法，您将在其中添加。

是的，这确实有效。然而，有一个问题。我在RuleSpaneView中分配的任何事件都会在每次渲染时重新分配。因此，如果它渲染两次，DOM只包含最新的渲染，但单击事件会触发两次。这些事件是使用视图中的事件哈希设置的。不应在每个渲染上重新分配任何事件。假设只将事件放入视图或初始化块上的events:{}属性中，则仅在初始化对象时才绑定事件。您应该知道主干中的事件块使用JQuery的.live和note.bind，但情况并非如此。每次重新渲染都会导致绑定另一个事件。我希望它在渲染之前删除事件。“认为我将不使用框架主干”给我带来了无尽的问题，而且还缺少帮助。如果覆盖视图的“remove”方法，并使用jQuery的remove删除较旧的元素，假设您使用了“live”或“delegate”事件，那么应该设置好。主干使用jQuery中的委托，不是活的。是的，这确实有效。然而，有一个问题。我在RuleSpaneView中分配的任何事件都会在每次渲染时重新分配。因此，如果它渲染两次，DOM只包含最新的渲染，但单击事件会触发两次。这些事件是使用视图中的事件哈希设置的。不应在每个渲染上重新分配任何事件。假设只将事件放入视图或初始化块上的events:{}属性中，则仅在初始化对象时才绑定事件。您应该知道主干中的事件块使用JQuery的.live和note.bind，但情况并非如此。每次重新渲染都会导致绑定另一个事件。我希望它在渲染之前删除事件。“认为我将不使用框架主干”给我带来了无尽的问题，而且还缺少帮助。如果覆盖视图的“remove”方法，并使用jQuery的remove删除较旧的元素，假设您使用了“live”或“delegate”事件，那么应该设置好。主干使用jQuery中的委托，不是实时的。第一个代码段应该可以工作，因为这就是我在控制器中设置东西的方式。$'content'.htmlcurrentView.render.el。亚瑟·德伯特的解决方案也应该奏效。可以

---

您向我们展示了RuleSpaneView的代码？第一个代码段应该可以工作，因为这就是我在控制器中设置内容的方式。$'content'.htmlcurrentView.render.el。亚瑟·德伯特的解决方案也应该奏效。你能给我们看一下RuleSpaneView的代码吗？这不是主干文档所建议的，正如你所注意到的，它会导致一些问题，比如当模型发生变化时，会附加两次，你必须修改。我还担心它引入的一些选择器与包含结构的耦合。这不是主干文档所建议的，正如您所注意到的，它会导致一些问题，比如在模型更改时附加两次，您必须修改。我还担心与包含结构的耦合，这会引入一些选择器。