Question

I’m having some difficulty with backbone js. Currently, I have a rails app that is giving information to backbone via json. It appears that this is all function correctly because when I navigate to the URL, the json data is displayed. I’m having difficulty when I am using the fetch method. Below is my code:

jQuery ->
  class Event extends Backbone.Model
    url: '/events/get_last'
    defaults:
      name: 'This isnt from the server'
      date_of: '2012-03-01'
      max_attendees: '300'

  class EventList extends Backbone.Collection
    url: '/events/get_events'
    model: Event

  class EventView extends Backbone.View
    el: $ 'body'
    model: Event
    initialize: (options) -> 
      _.bindAll @
      @event = new Event
      @event.fetch()
      @render()
    render: ->
      $(@el).append "<span>#{@event.get 'name'}"


  class EventRouter extends Backbone.Router
    routes : 
        '' : 'home'
        'dashboard' : 'render_data_view'
        'default' : 'default_view'
    home: -> 
      console.log "home"

    render_data_view: ->
      event_view = new EventView

    default_view: ->
      console.log 'the default view was hit'

    initialize: ->
      Backbone.history.start(pushState: true)

  event_router = new EventRouter

Answer 1

Your EventView should bind to its model’s "change" event so that fetch will trigger things automatically:

fetch model.fetch([options])

[…] A "change" event will be triggered if the server’s state differs from the current attributes.

So your view should look more like this:

class EventView extends Backbone.View
  el: 'body'
  initialize: (options) ->
    @model = new Event
    @model.on 'change', @render
    @model.fetch() # This will call `render` automatically.
  render: =>
    @$el.append "<span>#{@model.get 'name'}</span>"

A few notes:

1. You rarely need to use bindAll with CoffeeScript, use the fat arrow (=>) instead.
2. The model property on views should be set per-instance to a single model (hence the @event -> @model name change). Collections get their model property set in the class definition and the @model for a collection should be a model class.
3. Binding to the "change" event on the model means that your view will be notified (i.e. @render will be called) whenever anyone changes the model, this event behavior is sort of the whole point of Backbone so you should use it, the per-fetch success and error handlers are more for error handling and reporting success to the user.
4. You really should close your <span> elements.
5. The view already has @$el so you might as well use that instead of $(@el).
6. You can use el: 'body' instead of el: $ 'body' and leave the jQueryification to Backbone.
7. If you’re using an older Backbone then:
   1. You might have to use bind instead of on.
   2. You might not have @$el so $(@el) might be needed instead.