3

Rails 3.2 バックエンドで backbone.js とバックボーン リレーショナル 0.5.0 を使用しています。has_many Notes の Card モデルがあります。

これが私の 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

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 に答える