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

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

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

该骨干文档提到这是一个很好的方式,以避免同时渲染了太多的东西.