2015-11-03 57 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>