收集中的fetch（）遇到问题的骨架.js

Question

Warning: Code is in Coffeescript. I hope that's ok.

I have a model, Song , a collection Songs , and a view SongsView . Here it is:

SONG_TEMPLATE = '''
  <table>
  {{#if songs.length }}
    {{#each songs}}
        <tr><td>{{ this.name }}</td><td>{{ this.duration }}</td></tr>
    {{/each}}
  {{/if}}
  </table>
'''

$ ->
  class Song extends Backbone.Model
    parse: (response) ->
      console.log "model parsing #{response}"
    #

  class Songs extends Backbone.Collection
    initialize: ->
      @model = Song
      @url   = "/songs/data"

    parse: (response) ->
      console.log "collection parsing"
      console.log response

  # This works. The JSON here was grabbed right out of the XHR response I got from the server and pasted into my code.

  songs = new Songs(
    [
      {"name":"Stray Cat Strut","rating":4,"duration":3},
      {"name":"Chinatown","rating":2,"duration":4.2},
      {"name":"Sultans of Swing","rating":3,"duration":5.4},
      {"name":"Pride & Joy","rating":3,"duration":3}
    ]
    )

  # This fails. It should be exactly the same as the above code, and indeed, the collection parsing takes place.
  # However, the view renders nothing.

  # songs = new Songs
  # songs.fetch()

  class SongsView extends Backbone.View
    initialize: ->
      @model = Song
      @render()

    render: =>
      console.log "render"
      console.log @collection
      template = Handlebars.compile(SONG_TEMPLATE)
      @template = template(songs: @collection.toJSON())
      console.log "template: #{@template}"
      $('#song-list').html @template

  songView = new SongsView(collection: songs)

The issue I'm having is that there is some subtle difference between initializing songs from the JSON string and allowing backbone to populate it using fetch() . The object looks ok in the script debug window, but no joy.

So, what's going on here and am I sort of on the right track?

Thanks

Answer 1

Fetch is an asynchronous method, this means that when you render your view, the data has not been retrieved, but when you write it manually, the data is there. The general way to do this is to bind the reset trigger that gets called by fetch to the render method.

class SongsView extends Backbone.View
  initialize: ->
    @model = Song
    @collection.bind("reset", @render)
  render: =>
    console.log "render"
    console.log @collection
    template = Handlebars.compile(SONG_TEMPLATE)
    @template = template(songs: @collection.toJSON())
    console.log "template: #{@template}"
    $('#song-list').html @template

You should probably more your songs.fetch below where you instantiate your view too.

Answer 2

As answered by Gazler, the problem is that fetch is asynchronous. If you want to use Gazler's solution, be aware that the collection's fetch method no longer triggers the reset event by default. Therefore, you'll need to have the collection explicitly trigger the reset event:

my_collection.fetch({reset: true})

Another solution to solving this is using jQuery deferreds to display the view once the results have been fetched. More one using deferreds to manage view display when fetching data asynchronously: http://davidsulc.com/blog/2013/04/01/using-jquery-promises-to-render-backbone-views-after-fetching-data/

And waiting for multiple asynchronous data sources to return: http://davidsulc.com/blog/2013/04/02/rendering-a-view-after-multiple-async-functions-return-using-promises/