Question

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

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

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

这是我能让它发挥作用的唯一方式，它看起来像是黑客攻击：

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

在呈现之前必须清空DIV的HTML，所以我不会在#detail中呈现多个视图，这是追加会发生的事情。

也不是我用这种方式创建了太多的视图，在第一个代码段中替换HTML似乎更干净了吗？

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

Answer 1

你想要的是将已插入的DOM节点作为构造函数的'el'选项传递给视图：

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

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

backbone documentation提到这是一种避免同时渲染过多内容的好方法。

Answer 2

我实际上将附加到视图的render方法中。如果你想在模型改变时重新渲染，这不起作用 - 但为此我添加了一个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.js插入视图的正确方法

2 个答案: