Backbone解析服务器对模型的响应

时间:2015-11-03 11:54:50

标签: javascript json parsing backbone.js

我试图处理服务器响应,并且如何将json响应转换为Backbone模型有点困惑。

My 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中的每个单独对象都被设置为每个单独的模型。对不起,如果我不能更清楚 - 我对Backbone很新... enter image description here

1 个答案:

答案 0 :(得分:1)

也许您的困惑是因为您事实上能够在模型或集合上使用parse。从您的解释来看,response.results对象看起来像是要返回您希望成为应用程序模型的对象列表。但是因为你在模型中捕获了该对象,所以该模型不知道如何处理该数组。

我们假设您有这样的回复:

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

然后你只需在你的Collection上使用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>');
  });
});
&#13;
<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>
&#13;
&#13;
&#13;