Calling a jQuery plugin in a Backbone render method

Question

I have a render method in Backbone that goes basically like this:

render: function () {
  $.tmpl(this.template, attrs).appendTo(this.el);
  return this;
},
         


        

Answer 1

I ran into a similar issue setting up the jQuery Tools Tooltip plugin. But I had a much different approach that works well: triggering a custom event on the view. As far as I know, there is no 'inserted into dom' event fired built into Backbone, so I just did it myself. I don't use a Router but the modified code above would look something like this:

// In the router:
action: function () {
    var container = $('#container');

    container.append(myView.render().el));
    myView.trigger('rendered');
},

// In the view:
initialize: function() {
    this.bind('rendered', this.afterRender, this);
},
render: function (container) {
    $(this.el).append($.tmpl(this.template, attrs))
    return this;
},
afterRender: function() {
    $('label', this.el).inFieldLabels();
}

I suppose the advantage is that the view stays ignorant of its container. The disadvantage is that it's like an extra line or two of code. But if you need to setup a lot of plugins or do more stuff that requires the element to be in the DOM, it will work well (and it keeps logic separated).

I actually like @Skilldrick's method of passing the container to the view, but I still feel as if it makes sense to have the parent view be responsible for inserting the children. I'm new to Backbone so please feel free to comment.