1

我有一个简单的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 中渲染多个视图，这就是 append 会发生的情况。

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

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

4

2 回答 2

6

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

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

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

主干文档提到这是避免一次渲染太多东西的好方法。

于 2011-02-23T23:48:14.673 回答
1

我实际上附加了视图的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()));
},

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

于 2011-03-18T13:48:56.050 回答