Question

I am creating my application using backbone.js

As seen below I have a layoutView which I use to render the layout and also a mini profile within the layout.

The issue I have is with timing. I need to have the ‘render’ method complete first before triggering ‘renderProfile’ method. How can I do that?

Onethingaday.Views.Home ||= {}

class Onethingaday.Views.Home.LayoutView extends Backbone.View
  template: JST["backbone/templates/home/layout"]

  initialize: ->
    @options.user.bind('change',@render,@renderProfile, @)

  renderProfile: ->
    view = new Onethingaday.Views.Shared.MiniProfileView
      user: @options.user

    @$('.profile').html view.render().el

  render: ->
    $(@el).html(@template())
    @

Answer 1

Your situation is why I wrote LayoutManager for Backbone, http://github.com/tbranyen/backbone.layoutmanager.

What you should be doing is separating your sub views from your main (layout) view.

So in your route callback you’d have something like this:

// Initialize a Layout View
var profile = new Onethingaday.Views.Home.LayoutView();
// Initialize a MiniProfile View
var miniProfile = new Onethingaday.Views.Shared.MiniProfileView({
  model: user
});

// This appears synchronous in your code, so this should work fine
$(profile.render().el).find(".profile").html(miniProfile.render());

I would implore you to investigate my library, as I think the declarative manner in which sub views are associated to layouts is really quite elegant.