Backbone.js的越来越呈现回调，在视图中 [英] Backbone.js getting callback of render, within the view

问题描述

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

I have a Backbone app and we have stuff like this:

render: function() {

   this.$el.html(_template());

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

   return this;
}

的 #ID 是从该公司所呈现的元素。这只能有时候，因为它实际上插入DOM可能需要更长的时间。

The #id is from an element that's being rendered. This only works sometimes, as it can take longer for it to actually insert into dom.

是否有这种观点中的一种方式，以定义一个回调，或在某种程度上肯定知道拨打我们的插件（）函数之前DOM已被更新，？

Is there a way within this view, to define a callback or somehow know for sure that the dom has been updated, before calling our plugin() function?

感谢您！

推荐答案

您的问题是这样的：

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

在寻找 #ID 的DOM内，但这$埃尔不在DOM还没有。所以，如果 #ID 里面这一点。$埃尔，那么 #ID 不在DOM或者和 $（'＃ID'）将是空的。你想寻找 #ID 在这$埃尔和骨干提供的 这$ 该键：

is looking for #id inside the DOM but this.$el isn't in the DOM yet; so, if #id is inside this.$el, then #id isn't in the DOM either and $('#id') will be empty. You want to look for #id inside this.$el and Backbone provides the this.$ shortcut for that:

$（jQuery的或的Zepto） 视图。$（选择）

如果包含在页面上的jQuery或的Zepto，每个视图有一个 $ 函数运行视图的元素中范围查询。 [...]这是等同于运行：视图$ el.find（选择）

If jQuery or Zepto is included on the page, each view has a $ function that runs queries scoped within the view's element. [...] It's equivalent to running: view.$el.find(selector).

所以，你要做到这一点：

So you want to do this:

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

如果你的插件需要它的元素（也许它需要的大小和位置信息）进行渲染，那么你就必须要杂牌张望了一下：

If your plugin needs its element to be rendered (perhaps it needs size and position information), then you'll have to kludge around a bit:

1. 主叫方可以在您的视图调用一个方法已经将其添加到DOM后。


2. 您可以使用 的setTimeout（...，0）或 _。推迟 绑定后>浏览器已经更新了DOM。仅当每个人都使用共同的 x.append（v.render（）。EL）模式虽然工作。

1. The caller can call a method on your view after it has added it to the DOM.
2. You can use setTimeout(..., 0) or _.defer to bind the plugin after the browser has updated the DOM. This only works if everyone is using the common x.append(v.render().el) pattern though.

这篇关于Backbone.js的越来越呈现回调，在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！