骨干关系 fetchRelated 不发送请求答案

【问题标题】：Backbone-relational fetchRelated not sending request骨干关系 fetchRelated 不发送请求
【发布时间】：2012-06-06 12:13:31
【问题描述】：

我正在使用带有 Rails 3.2 后端的主干.js 和主干关系 0.5.0。我有一个卡片模型，它有_many Notes。

这是我的 JS 模型和集合：

Workflow.Collections.Cards = Backbone.Collection.extend({ 
  model: Workflow.Models.Card,
  url: '/cards'
});

Workflow.Models.Card = Backbone.RelationalModel.extend({
  modelName   : 'card',
  urlRoot     : '/cards',

  relations: [
  {
    type: Backbone.HasMany,
    key: 'notes',
    relatedModel: 'Workflow.Models.Note',
    collectionType: 'Workflow.Collections.Notes',
    includeInJSON: false,
    reverseRelation: {
      key: 'card',
      includeInJSON: 'id'
    }
  }]

});

Workflow.Collections.Notes = Backbone.Collection.extend({
  model: Workflow.Models.Note,
  url: '/cards/74/notes' // intentionally hard-coded for now
});

Workflow.Models.Note = Backbone.RelationalModel.extend({
  modelName   : 'note',
  urlRoot     : '/notes'
});

正常提取效果很好，但是当我在控制台中尝试 fetchRelated 时，我得到一个空数组：

card = new Workflow.Models.Card({id: 74}) // cool
card.fetch() // hits the sever with GET "/cards/74" - works great
card.fetchRelated('notes') // [] - didn't even try to hit the server

奇怪的是这行得通：

card.get('notes').fetch() // cool - GET "/cards/74/notes"

我可以使用该方法并解析响应文本，但感觉真的很脏。

有人知道我在这里缺少什么吗？

先谢谢了，这个真的很折磨我！

学习

【问题讨论】：

标签： backbone.js fetch backbone-relational

【解决方案1】：

您应该使用Note ids 数组创建Card：card = new Workflow.Models.Card({id: 74, notes: [74, 75]});，并相应地更改Notes 的url 方法：

Workflow.Collections.Notes = Backbone.Collection.extend({
  model: Workflow.Models.Note
});

Workflow.Models.Note = Backbone.RelationalModel.extend({
  modelName   : 'note',
  urlRoot     : function () {
    return this.get('card').url() + '/notes';
}
});

card = new Workflow.Models.Card({id: 74, notes: [74, 75]});
card.fetchRelated('notes');

http://jsfiddle.net/theotheo/5DAzx/

【讨论】：

谢谢，我到电脑前试试这个！我能问一下给卡片一些笔记的目的是什么？我正在尝试延迟加载这些数据，而不是在页面加载时将其关闭，并且我引导卡片等，因此很可能我的卡片 JS 模型在我获取它们之前不会知道它们的注释......
好的，进展。这会为我们指定的每个音符触发一个 GET。知道我是否可以使用 fetchRelated 来完全延迟加载笔记吗？我想从服务器上拉下新的...
好的，我明白你的意思。我已经查看了骨干关系源，我认为如果没有相应的模型 ids 数组，您将无法使用 fetchRelated。顺便说一句，您可以查看 [单元测试][1] 以获取 fetchRelated 的用法示例。因此，当您获取Card 然后调用fetchRelated 时，您可以获得Note ids 数组。或者也许你不想这样做？ [1]：github.com/PaulUithol/Backbone-relational/blob/master/test/…
单元测试很好，我来看看。我想我可以更改我的 API 以使用更精简的卡片版本来引导每个笔记只有一个 id，然后在需要时延迟加载。我主要关心的仍然是在过渡期间添加的注释。我一直在阅读更多文档，我认为我可以在笔记集合上指定一个 prase() 方法，以确保调用 card.get('notes').fetch() 将填充所有笔记的集合事先不知道ID的卡。一旦我对其进行了调整，我将发布解决方案。感谢您的帮助！
您也可以将card 的fetchRelated() 覆盖为第一个fetch() 集合，然后调用父级的fetchRelated()。我还没有尝试过这种方法，但我正在考虑它，因为我也想延迟加载甚至是 ID，以减少数据库上不必要的负载。

【解决方案2】：

我应该在不久前发布我的解决方案 - 可能有更好的方法，但这是我采用的惯例：

以下所有代码都在卡片视图（显示笔记的地方）中。

首先，我将renderNotes 方法绑定到卡片笔记集合上的'reset' 事件：

initialize: function () {
    _.bindAll(this);

    this.model.get('notes').on('reset', this.renderNotes);

    var self = this;
    this.model.get('notes').on('add', function(addedNote, relatedCollection) {
      self.renderNote(addedNote);
    });
  }

我还绑定到该集合上的'add' 以调用单数renderNote。

renderNotes 和 renderNote 方法是这样工作的：

renderNotes: function () {
    if (this.model.get('notes')) {
      this.model.get('notes').each(this.renderNote);
    }
  },

  renderNote: function (note) {
    var noteView = new Workflow.Views.Note({ model: note });
    this.$('.notes').append(noteView.render().el);
  },

然后，拼图的最后一部分是实际打开服务器以获取卡片的注释（这将反过来触发我在上面绑定的'reset' 事件）。我在卡片视图的render 方法中执行此操作：

render: function () {
    // render all of the eager-loaded things
    this.model.get('notes').fetch();
    return this;
  },

由于 @user1248256 好心帮助我在我的 OP 上的 cmets 中锻炼，我的困惑主要在于我希望 fetchRelated 拉下延迟加载的记录 - 实际上并非如此。

作为旁注，这个视图实际上是一个模式，可以打开和关闭（从页面中删除）。为了防止this excellent post中描述的僵尸事件问题，我也手动解除了上述事件的绑定。

【讨论】：