Question

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

render: function() {

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

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

   return this;
}

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.

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?

Thank you!

Answer 1

Your problem is that this:

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

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 or Zepto) view.$(selector)

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. 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.