Question

我正在使用backbone.js和骨干关系0.5.0和Rails 3.2后端。我有一个卡片模型，其中有很多笔记。

以下是我的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"

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

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

先谢谢，这个真的折磨着我！

斯图

Answer 1

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

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/

Answer 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的评论中帮助我解决了问题，主要是因为我希望fetchRelated能够删除延迟加载的记录 - 事实并非如此。

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

Backbone-relational fetchRelated不发送请求

2 个答案: