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 回答