Backbone.js在视图中获得渲染回调

我有一个Backbone应用程序，我们有这样的东西：

render: function() { this.$el.html(_template()); $('#id').plugin(); return this; } 

#id来自正在渲染的元素。 这有时只能起作用，因为实际插入dom可能需要更长的时间。

在调用我们的plugin()函数之前，是否有一种方法可以定义回调或以某种方式确定dom已更新？

谢谢！

Answer 1

你的问题是：

 $('#id').plugin(); 

正在寻找DOM中的#id但是this.$el还没有在DOM中; 所以，如果#id在this.$el ，那么#id也不在DOM中， $('#id')将为空。 你想在这里寻找#id this.$el和Backbone提供了this.$快捷方式 ：

$（jQuery或Zepto） view.$(selector)

如果页面中包含jQuery或Zepto，则每个视图都有一个$函数，该函数运行在视图元素中作用域的查询。 […]它相当于运行： view.$el.find(selector) 。

所以你想这样做：

 this.$('#id').plugin(); 

如果你的插件需要渲染它的元素（也许它需要大小和位置信息），那么你将不得不徘徊一下：

1. 在将视图添加到DOM后，调用者可以在视图上调用该方法。
2. 在浏览器更新DOM 之后 setTimeout(..., 0)您可以使用setTimeout(..., 0)或_.defer绑定插件。 这只适用于每个人都使用常见的x.append(v.render().el)模式。

Answer 2

简单地触发一个事件：

 MyView = Backbone.View.extend({ initialize: function(){ this.on('view:rendered', this.initPlugin, this); }, render: function(){ this.$el.html(_template()); this.trigger('view:rendered', this/*or some useful data*/) }, initPlugin: function(){ this.$('#id').plugin()//watch on this.$ to apply selector inside this view only } 

Answer 3

我不确定但是试一试

将其作为事件绑定到视图，在呈现视图后触发它

 var viewobject = {}; _.extend(viewobject, Backbone.Events); viewobject.on("alert", function(msg) { $('#id').plugin(); }); object.trigger("alert", "an event");