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 plete 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())
    @

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 plete 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())
    @

• javascript
• jquery
• backbone.js
• render
• timing

Share Improve this question Follow asked Dec 22, 2011 at 2:48 ZhenZhen 12.4k3838 gold badges125125 silver badges200200 bronze badges 2

• Have you tried using $(document).ready(function(){ //after page loads }) ? – Control Freak Commented Dec 22, 2011 at 2:57
• Did my solution not help you? – tbranyen Commented Dec 28, 2011 at 5:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Your situation is why I wrote LayoutManager for Backbone, http://github./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.