2011-12-14 22 views
2

backbone.jsを使用して私の最初のプロジェクトに取り組んでいます。 Playのフロントエンドでなければなりません! JSONインターフェイスを持つアプリケーション。ここに私のJSコードJSON Response with Backbone.js

var api = 'http://localhost:9001/api' 

// Models 
var Node = Backbone.Model.extend(); 

// Collections 
var Nodes = Backbone.Collection.extend({ 
    model: Nodes, 
    url: api + '/nodes', 
}); 

// Views NODE 
var NodeView = Backbone.View.extend({ 
    el: $("#son_node_elements"), 
    render: function(){ 
    var source = $("#son_node_item_templ").html(); 
    var template = Handlebars.compile(source); 
    $(this.el).append(template(this.model.toJSON())); 
    return this; 
    } 
}); 

var NodeListView = Backbone.View.extend({ 

    initialize: function(){ 
    _.bindAll(this, "render"); 
    this.collection = new Nodes(); 
    this.collection.bind("change",this.render); 
    this.collection.fetch(); 
    this.render(); 
    }, 

    render: function(){ 
    _(this.collection.models).each(function(item){ 
     var nodeView = new NodeView({model: item}); 
     $(this.el).append(nodeView.render().el); 
    }, this); 
    } 
}); 

Nodes = new NodeListView({el:$('#son_nodes')}); 

の一部だ私の問題は、this.render()が呼び出されたときに、this.collection.fetch()はまだ行われていないとthis.collectionをレンダリングするanithing含まれていないことです。私がthis.render()にブレークポイントを設定したときには、すべてが正常に動作します(例えば、firebugを使用)。this.render()はすぐに呼び出されません。私は、私のアプリのAPIではなく、ローカルのJSONファイルにアクセスするときと全く同じ結果を得ます。どのようにこの問題を処理するための任意の提案?

答えて

3

取得もが外ビューから呼び出され、そのビューではなく、そのために耳を傾けてみましょうすることができます。

this.collection.bind("reset",this.render);

リセットイベントは、this.collection.fetch(); 

にすべてのコールでトリガそして最後に、this.render();をスキップしますリセットイベントハンドラはあなたのためにこれを行うので、あなた自身では呼び出さないでください。

+0

this.collection.fetch()の実行中にエラーが発生した場合はどうなりますか? – c4urself

+0

成功関数とエラー関数をfetch関数に渡すことができます –

2

あなたはあなたのための「成功」のコールバック「フェッチ()」内の「レンダリング」を呼び出す必要があります。

this.collection.fetch({ 
    success: function(col) { 
    col.render(); 
    } 
}); 

コレクションフェッチが完了するまでレンダリングを延期すること。それはすべて非同期です。

警告:特にバックボーンについてはほとんど分かりませんが、これらの行に沿ったものは間違いなく問題です。言い換えれば、私が言及していないことについて心配する他の事柄があるかもしれません(私は彼らが何であるかを知らないので:-)。

+0

+1。 '.fetch'は非同期メソッドです。要求が戻る前にスクリプトが次の行に移動し、そこに存在するデータに依存する' .render'のようなものは失敗します。 fetchメソッドの成功ハンドラでレンダリングを行う必要があります。 –

+0

ありがとうポイント、ちょうど私の問題thats。 'col.render()'の部分は動作します...関数に渡される 'col'はどのようなオブジェクトですか? – sontags

+0

@sontagsコレクションオブジェクト自体です。この場合、それを使用すると便利でした。そうでなければ、 'this.collection'を一時ファイルに保存しなければならなかったからです。ハンドラがそれに乗ることができるようにする変数。 「成功」機能は、(明らかに)コレクション自体に生のサーバーレスポンスを加えたものです。私は2番目の議論を省略しました。なぜなら、私はそれがどのように見えているのか分からず、あなたの例では、とにかく面白そうに見えなかったからです。 – Pointy