Question

我有一个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.$ shortcut：

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

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

所以你想这样做：

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

如果您的插件需要渲染其元素（可能需要大小和位置信息），那么您将不得不喋喋不休：

调用者可以在将视图添加到DOM后调用视图上的方法。
在浏览器更新DOM后，您可以使用setTimeout(..., 0) or _.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");

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

3 个答案: