2012-04-08 8 views
0

バックボーンjsでいくつかの問題があります。現在、私はjson経由でバックボーンに情報を提供するレールアプリを持っています。これは、URLにナビゲートするとjsonデータが表示されるため、これはすべて正しく機能しているようです。フェッチメソッドを使用しているときに問題が発生しています。以下は、私のコードは次のとおりです。バックボーンjsモデル/コントローラからjsonデータを変数に割り当てる

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 

答えて

1

fetchが自動的に物事をトリガするように、そのモデルの"change"イベントにバインドする必要がありますあなたのEventView:

はフェッチmodel.fetch([options])

[...] "change"イベントがトリガされます場合は、サーバーの状態現在の属性とは異なります。

だからあなたのビューは、より次のようになります。

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>" 

いくつかの注意事項:

  1. あなたはめったに代わりにfat arrow (=>)を使用し、CoffeeScriptのでbindAllを使用する必要がありません。
  2. ビューのmodelプロパティは、インスタンスごとに単一のモデルに設定する必要があります(したがって、@event - >@model名前の変更)。コレクションのクラス定義にはmodelプロパティが設定されており、コレクションの@modelはモデルクラスにする必要があります。
  3. モデルに"change"イベントへの結合がは、モデルを変更するたびに、あなたのビュー(すなわち@renderが呼び出されます)に通知されることを意味し、あなたがそれを使用する必要がありますので、このイベントの動作は、バックボーンの全体のポイントの一種であります成功ハンドラとエラーハンドラは、エラーを処理して成功をユーザに報告するためのものです。
  4. 本当にあなたの<span>要素を閉じてください。
  5. ビューにはすでに@$elがありますので、$(@el)の代わりにそのビューを使用することもできます。
  6. el: $ 'body'の代わりにel: 'body'を使用し、jQueryificationをバックボーンのままにすることができます。
  7. あなたが古いバックボーン使用している場合:
    1. をあなたはbindの代わりonを使用する必要があります。
    2. @$elがない可能性がありますので、代わりに$(@el)が必要な場合があります。
+0

本当にこの詳細な回答に感謝します。本当にありがとう! – Kyle

1

は、バックボーンのドキュメントを見てみましょう:http://documentcloud.github.com/backbone/#Model-fetch

model.fetch({ 
success: function(model, response) {...}, 
error: function(model, response) {...} 
}); 

あなたは成功とフェッチ方式のための誤差法を設定する必要があります。成功イベントを取得すると、render()を呼び出すことができます。

関連する問題