3

我正在使用带有 Rails 3.2 后端的主干.js 和主干关系 0.5.0。我有一个有很多笔记的卡片模型。

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

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

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

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

斯图

4

2 回答 2

2

您应该Card使用Noteids 数组创建：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/

于 2012-06-06T18:48:46.163 回答
0

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

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

首先，我将一个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拉下延迟加载的记录——实际上并非如此。

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

于 2012-07-16T23:41:20.537 回答