CODEWITHSUNDEEP
ruby-on-railsbackbone.jscoffeescript
Srikanth Jeeva
Srikanth Jeeva

Reputation: 3011

backbone.js + coffeescript - wait for ajax to complete

Models: entry.js.coffee 

class Raffler.Models.Entry extends Backbone.Model

  url: '/api/entries/12345'

routers: entries_router.js.cofee

routes:
'entries/:id': 'show'

show: (id) ->
  @model = new Raffler.Models.Entry()
  @model.fetch()
  view1 = new Raffler.Views.Profile(model: @model)
  $("#profile_container").html(view1.render().el)

View: profile.js.coffee

class Raffler.Views.Profile extends Backbone.View
  template: JST['entries/profile']

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

Template: profile.jst.eco 

<div class="profile_desc">
  <table>
    <tr>
      <td valign="top" class="desc_heading">about: </td>
      <td>
        <%= @model.get('aboutMe') %>
      </td>
    </tr>
  </table>
</div>

JSON Response:

{"aboutMe":"I am a proud Ruby Developer}

I can see the ajax call fetching the data. But i guess its rendering the view file before that.

Got the error in Firebug: 

TypeError: this.model is undefined
    __out.push(__sanitize(this.model.get('aboutMe')));

How can i wait for the model ajax to complete?

Upvotes: 0

Views: 309

Answers (1)

VadimAlekseev
VadimAlekseev

Reputation: 2248

Before fetching, you must specify the callback function, something like this:

show: (id) ->
  @model = new Raffler.Models.Entry()
  @model.on 'sync', => @create_profile_view @model
  @model.fetch()

create_profile_view: (model) ->
  view1 = new Raffler.Views.Profile(model: model)
  $("#profile_container").html(view1.render().el)

You can use different events you want (http://backbonejs.org/#Events).

P.S. I prefer extract render logic and fetching to view.

Upvotes: 1

Related Questions