将额外数据传递给 Backbone Collection fetch -- 返回未定义？答案

【问题标题】：Passing extra data to Backbone Collection fetch -- returns undefined?将额外数据传递给 Backbone Collection fetch -- 返回未定义？
【发布时间】：2013-06-24 05:51:19
【问题描述】：

假设我有一个名为 index 的主干路由，它从服务器获取集合：

var characters = new App.Collections.Characters();
    characters.fetch({
      success: function(data) {
        var homeView = new App.Views.Home({
          collection: new Backbone.Collection(data)
        });
        $('#content').html(homeView.render().el);
      }
    });

很简单吧？获取成功后，创建一个新视图并使用从服务器检索到的数据填充它。

这假设我只传递一个字符数组。在 Express 3.0 中：

res.send(characters.slice(counter, counter+2)); // array of 2 characters

现在，如果我要在这两个字符之外添加一个 nonce 并传递一个对象：

res.send({ nonce: randomString, characters: characters.slice(counter, counter+2);

当我这样做时，我无法再访问字符或随机数：

  // the same fetch function from above
  success: function(data) {
    console.log(data.nonce);  // undefined
    console.log(data.characters); // undefined
  }

Backbone Collection 是否在幕后做了一些阴暗的事情？为什么我不能从服务器传递的 collection fetch 的成功对象访问我的对象属性？

更新：

当我像第一种情况一样向我的集合发送一个简单数组时，控制台输出如下：

当我按照@matt2000 的建议发送数据然后在 Backbone 中将其称为data.models[0].attributes.characters; 时，它的外观如下：

【问题讨论】：

最好的办法是检查控制台是否有任何错误。然后检查网络请求，看看响应是什么样子的
success回调的第一个参数只是集合本身，而不是服务器发送的数据。
@Loamhoof 那是有道理的。除了收集之外，我还有哪些选择可以让服务器发送这些数据？
@TwilightPonyInc.试试parse 方法吧。如果您需要更深入地研究response 对象，我猜您将不得不深入研究 jQuery XHR 方法。

标签： javascript ajax backbone.js express

【解决方案1】：

Backbone 在引擎盖下有一点魔力。将作为第一个参数传递给 success 回调的不是服务器提供的原始数据，而是解析后的集合 (Backbone doc)。

您可以覆盖集合的默认 parse 方法，以便从服务器的响应中获取数组。

var Characters = Backbone.Collection.extend({
  url : //REST access point
  parse : function( response ) {
     this.nonce = response.nonce;
     // Anything returned by this function will be used as the first argument to
     // construct the collection.
     return response.characters;
  }
});

您现在可以在提取时直接使用字符实例，您不必使用它的结果创建新集合。

var characters = new Characters();
characters.fetch({
  success: function( collection ) {
    var homeView = new App.Views.Home({
      collection: collection
    });
    $('#content').html(homeView.render().el);
  }
});

【讨论】：

谢谢。这个方法对我有用，所以我接受这个答案。

【解决方案2】：

传递给成功回调的数据应该是一个对象数组。我想你的意思是：

res.send([{ nonce: randomString, characters: characters.slice(counter, counter+2]);

和：

success: function(data) {
  console.log(data[0].nonce);  // randomString
  console.log(data[0].characters); // count
}

【讨论】：