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

发布于 2024-10-19 02:13:45 字数 627 浏览 6 评论 0原文

我有一个简单的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 看起来更干净？

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

原文

I have a simple backbone.js app. I want to render a view into the DOM of the HTML page, this view is a detail view for a model. My HTML page already has the DIV element that I want to render the view into. If I try to render my view like this:

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

It fails and I get [Object HTMLDivElement] inserted into the DOM, not my rendered HTML.

This is the only way I can get it to work and it seems like a hack:

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

Having to empty the HTML of the DIV before rendering so I don't get multiple views rendered inside #detail which is what would happend with append.

Also aren't I creating way too many views this way, just seems cleaner to replace the HTML as in the first code segment?

What is the correct way to render this view?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绿萝 2024-10-26 02:13:45

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

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

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

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

What you want is to pass the already inserted DOM node to the view as a 'el' option to the constructor:

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

This way, it won't render again. You still need to make sure your view's 'render' method will be able to render a correct view from an updated model, though.

The backbone documentation mentions this as a good way to avoid rendering too much stuff at once.

回复收藏 0 原文

稚气少女 2024-10-26 02:13:45

实际上，我将添加到视图的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()));
},

不确定这是否是“最好的”，但我认为它效果很好。我还看到你有一个集合绑定到一个视图，该视图循环遍历所有模型并呈现集合视图的“子视图” - 这提供了一种比在要附加的位置进行硬编码更好的编程方法。

I actually append in the render method of the view. This doesn't work if you want to re-render when models change - but for that I've added a refresh method that render actually calls before appending. I then bind the refresh to the model change (if I need that). So in my View, I do this:

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

Not sure if that's the "best", but I think it works pretty well. I've also seen where you have a collection bound to a view that loops through all of the models and renders "sub-views" of the collection view - this provides a nicer programmatic approach than hard-coding where you're going to append.

回复收藏 0 原文

~没有更多了~