2012-04-13 2 views
2

backbone.jsアプリケーションを既存のCodeigniter APIに接続しようとしています。私はgithubのtodosの例を見てそこから構築しました。私は「読み取り」に呼び出され、findAllの機能をオーバーライドすることだし、ページを取得し、バックフェッチ機能にそれらを返すようにしようとしています :backbone.jsのsync関数をオーバーライドするときのサーバーレスポンスの処理方法

のfindAll:機能(){ はconsole.log( '同期 - findAll ');

var url = "/folio/get/8"; 
var data = ''; 

var postmethod = 'GET'; 

$.ajax({ 
    url : url, 
    type : postmethod, 
    async: false, 
    data: data, 
    success: function(response) 
    { 
        console.debug("response",response); 
     console.debug("response.pages", response["pages"]); 
     return _.values(response["pages"]); 
    } 
}); 

}

APIはこのような何かを返す - console.debug( "レスポンス"、応答)を介して出力を:

{ 
    "id": "8", 
    "facebook_id": "123456789", 
    "title": "title", 
    "access_date": null, 
    "rating_avg": "0", 
    "pages": [ 
     { 
      "id": "6", 
      "picture1": { 
       "id": "3", 
       "tag": "1", 
       "tip": "Crazy", 
       "facebook_picture_id": "1239102391023" 
      }, 
      "picture2": "28", 
      "picture3": "29", 
      "picture4": null, 
      "picture5": null, 
      "picture6": null, 
      "caption1": "caption 1", 
      "caption2": "caption 2", 
      "sequence": "2", 
      "folio": "8", 
      "ts": "2012-04-10 15:13:23", 
      "template": "#page-template-2" 
     }, 
     { 
      "id": "5", 
      "picture1": "24", 
      "picture2": "25", 
      "picture3": "26", 
      "picture4": null, 
      "picture5": null, 
      "picture6": null, 
      "caption1": "caption 1", 
      "caption2": "caption 2", 
      "sequence": "4", 
      "folio": "8", 
      "ts": "2012-04-10 15:13:23", 
      "template": "#page-template-2" 
     } 
    ] 
} 

が、その後console.debug(「response.pages "、response [" pages "])は" undefined "を出力します。それはなぜそれをするのですか?

ありがとうございます!

---------------------

ご回答有難うございます。私はちょうどモデル内からajax呼び出しを行うことができるヒントは本当に役立ちます。事は、私が1 PageListコレクションにいくつかのページを取得しようとしていますことをされていますので、APPVIEWのintitialize関数内で、私はすべてのページを移入してビューを更新し

Pages.fetch(); 

を呼び出しています

$(function(){ 
    // Page Collection 
    // --------------- 

    var PageList = Backbone.Collection.extend({ 

    model: Page, 
    localStorage: new Store("wickes-backbone"), // this to get hold of my overwritten localstorage file - it is not actually a localStorage 

    nextOrder: function() { 
     if (!this.length) return 1; 
     return this.last().get('order') + 1; 
    }, 

    comparator: function(page) { 
     return page.get('order'); 
    } 

    }); 

    window.Pages = new PageList; 
}); 

。モデル自体の中でそれをどうやって行うのか本当にわからないのですか?

+0

あなたのビュー/モデルを投稿できますか? –

+0

をコードに変更すると、 のconsole.debug( "response.pages"、response.pages); コンソール版画:未定義 response.pages そう変わらない結果あなたの答えのための – Dine

答えて

1

私はあなたが$アヤックス()の成功の機能を使用しているどのようにあなたの問題があると思う:あなたはAJAX呼び出しに成功関数から何かを返す場合

$.ajax({ 
    url : url, 
    type : postmethod, 
    async: false, 
    data: data, 
    success: function(response) 
    { 
     console.debug("response",response); 
     console.debug("response.pages", response["pages"]); 
     return _.values(response["pages"]); 
    } 
}); 

、それがにまっすぐになるだろうbitbucket。その_.values()はどこにも向いていません。 $ .ajax()呼び出しから出てくることは約束です。それだけです。その約束は.done()、.fail()などを後で添付することができます。また、.when()や他の目的にも使用できます。しかし、後で呼び出すsuccess関数とは何の関係もありません。これは、その約束事に添付された.done()関数に相当します。

あなたが本当に望むのは、AJAXが終了してから結果を操作してモデルに設定することです。

しかし、一般的に、バックボーンを同期させることは、どのように使用することを意図したものではありません。 Backboneに組み込まれているSyncを使用せずに、フェッチ、保存などをスキップしてもそれはまだ喜んでそうのように呼ばれる(と、それはあなたがフェッチをやっていただけのように、更新するモデルは、単に更新することに注意してください)されて収納さ:あなたのPageListバックボーンコレクションにこれを追加すること

var myModel = Backbone.Model.extend({ 
    goGetSomeData : function() { 
    var scope = this; 

    $.ajax(....).done(
     function (results) { 
     scope.set(results); 
     } 
    ); 
    } 
}); 
+0

おかげで多くのことを、サーバとの通信は、モデル内で直接行うことができることをアドバイスは非常に便利です。しかし、私はいくつかのモデルを同時に更新する必要があり、どのように同期機能なしでそれを行うか分からない。私は上記の質問を編集しました。私は本当に感謝しています。 – Dine

1

試してみてください。

parse: function(response) { 
    return response.pages 
    } 

これには2つのことを行います。

  1. はあなたの応答でpages配列を参照する.pagesを使用します。あなたのコードからわかるように、バックボーンは全体的なオブジェクトレスポンスを使ってコレクション内のオブジェクトを判断しています。
  2. バックボーンにpagesアレイを使用して、コレクション内のモデルをインスタンス化するように指示します。それは 1つのPageListコレクションにあなたのページのオブジェクトを取得する必要がありますこれを行う

ネイティブparseメソッドをオーバーライドし、あなたが本当に(ページ配列)欲しいものを返すことによってこれを行います。これは私のために同様の状況で働いています。それが役に立てば幸い!

+0

このヒントをありがとう、間違いなく私はある時点で私を助けます! – Dine

0

私は実際にここで間違っていた問題を解決しました。 John Munschが最初の答えで述べたように、ajaxリクエストは正しくはありませんでした。これは実際にはバックボーンの問題ではありませんでしたが、私が作っていたajaxコールでは問題でした。まず第一に、私は、JSONであることを、それを変更し、第二に、私は応答を覚えているとの同期機能にそれを返すことができますAJAX呼び出しの変数「ページ」外部の作成:あなたのためのすべての人に

findAll: function() { 

    var url = "/folio/get/8"; 
    var pages; 
    var postmethod = 'GET'; 

    $.ajax({ 
     type: postmethod, 
     url: url, 
     async: false, 
     beforeSend: function(x) { 
      if(x && x.overrideMimeType) { 
      x.overrideMimeType("application/j-son;charset=UTF-8"); 
      } 
    }, 
    dataType: "json", 
    success: function(data){ 
     console.debug("data", data); 
     console.debug("data.pages", data.pages); 
     pages = data.pages; 

    } 
    }); 

    return pages; 

}, 

おかげで非常に多くの助けて、私はあなたの答えから多くを学んだ!

関連する問題