2015-11-03 46 views
0

我正在嘗試處理服務器響應,並且有點困惑如何將json響應轉換爲Backbone模型。Backbone解析服務器對模型的響應

我骨幹模型看起來像這樣:

Entities.Recipe = Backbone.Model.extend({ 
     defaults: { 
      id: '', 
     name: '', 
introduction: '' 
       }, 
    parse: function (response) 
     { 
      if(._isObject(response.results)){ 
      return response.results 
      else { 
      return response 
      } 
     }) 

Entities.RecipeCollection = Backbone.Collection.extend({ 
     url: 'recipes', 
    model: Entities.Recipe 
    )} 

var API = { 
    getRecipeEntities: function(){ 
    var recipes = new Entities.RecipeCollection() 
    var defer = $.Deferred() 
     recipes.fetch({ 
      url: 'http://3rdpartyApilocation.com/recipes' 
     success: function (data) { 
     defer.resolve(data) 
     } 
    }) 

    var promise = defer.promise() 
    $.when(promise).done(function (fetchedData) 
    {}) 
    return promise 
    } 


RecipeManager.reqres.setHandler('recipe:entities', function() 
{ 
    return API.getRecipeEntities() 
} 

而且response.results是對象的數組 - 與具有ID密鑰,名稱密鑰和引進關鍵的每個對象。但是因爲我對Backbone沒有經驗,所以我不知道如何將這些結果映射到模型上? enter image description here

我已經安裝了Chromes Marionette檢查器,並且當我查看整個結果數組似乎被傳遞給模型時,而不是每個response.result中的每個單獨對象都被設置爲每個單獨的模型。對不起,如果我不能更清晰 - 我是非常新的主幹... enter image description here

回答

1

也許你的困惑是因爲你實際上能夠使用parse在模型或集合。從你的解釋看,它看起來像response.results對象返回的對象列表,你想成爲你的應用程序模型。但是因爲你在模型中捕獲該對象,所以該模型不知道該如何處理該數組。

比方說,你有這樣的迴應:

{ 
    "status": "ok", 
    "results": [ 
     { 
      "id": 1, 
      "name": "Pie" 
     }, { 
      "id": 2, 
      "name": "Rice" 
     }, { 
      "id": 3, 
      "name": "Meatballs" 
     } 
    ] 
} 

然後你只想用parse你的收藏,讓它知道迴應是數組本身,並幫助它找到它的results財產。

這裏有一個工作示例:

var Recipe = Backbone.Model.extend(); 
 

 
var Recipes = Backbone.Collection.extend({ 
 
    model: Recipe, 
 
    url: 'http://www.mocky.io/v2/56390090120000fa08a61a57', 
 
    parse: function(response){ 
 
    return response.results; 
 
    } 
 
}); 
 

 
var recipes = new Recipes(); 
 

 
recipes.fetch().done(function(){ 
 
    recipes.each(function(recipe){ 
 
    /** Just demo of the fetched data */ 
 
    $(document.body).append('<p>'+ recipe.get('name') +'</p>'); 
 
    }); 
 
});
<script src='http://code.jquery.com/jquery.js'></script> 
 
<script src='http://underscorejs.org/underscore.js'></script> 
 
<script src='http://backbonejs.org/backbone.js'></script>

相關問題