0

あいまいなタイトルで申し訳ありません。何が起こっているのかよくわかりません。

だから、これは私の見解でのレンダリングです：

  render: function () {
    var that = this;
    var template = JST['gists/index'];
    that.$el.html(template);
    console.log(['index to render', that.collection]);
    _.each(that.collection, function (gist) { // <- I set a breakpoint here
      console.log('looping');
      that.appendGistDetail(gist);
    });

    return that;
  },

`console.log(..., that.collection]) は、このコレクションを正しく記録しています:

["index to render", child]
  0: "index to render"
  1: child
    _byId: Object
    length: 1
    models: Array[1] // <- Note one element. Saving space, but I checked it out and the model is correct
// Worth noting 'looping' is not being logged

ただし、前述のブレークポイント スコープ変数からの出力は、Chrome 開発ツールに次のように表示されます。

that: child
  $el: jQuery.fn.jQuery.init[1]
  childViews: Array[0]
  cid: "view2"
  collection: child
    _byId: Object
    length: 0
    models: Array[0] // <- Note it's empty, just to test I also set a bp on the line above and it's the same, and when I hovered my mouse over `that.collection` from `console.log` it also said it was empty, but it logs correctly.

だから、私は本当に何をすべきか、あるいは何が起こっているのかさえわかりません.

4

3 に答える 3

3

したがって、ここにブレークポイントを設定します。

_.each(that.collection, function (gist) {

それthat.collectionが空であることを確認しますが、あなたのconsole.log：

console.log(['index to render', that.collection]);

that.collectionには 1 つのモデルがあることを示唆しています。2 つの紛らわしい動作が同時に発生していると思われます。

  1. console.log引数へのライブ参照をコンソールにスローしますが、現在の状態のスナップショットは取得しません。そのため、呼び出しとコンソールの表示の間に何かが変更されたconsole.log場合、ログに記録したと思われるバージョンではなく、変更されたバージョンが表示されます。
  2. Collection#fetchは AJAX 呼び出しであり、AはAsynchronousを表します。

したがって、一連のイベントはおそらく次のようになります。

  1. collection.fetch()AJAX 呼び出しを開始するあなた。
  2. あなたが言うv = new View({ collection: collection })とv.render()。
  3. console.logヒットし、コレクションへの参照がログに隠されます。
  4. ブレークポイントに到達し、空のコレクションを見つけます。
  5. サーバーが AJAX 呼び出しに応答し、コレクションに 1 つのモデルが取り込まれます。
  6. コンソールを見ると、1 つのモデルを含むコレクションが見つかります。
  7. 錯乱。

解決策は、レンダリングをコレクションのイベントにバインドしrender、空のコレクションを適切な方法で処理できるようにすることです。

console.logまた、非同期のものをデバッグするために使用する場合は注意してくださいconsole.log(collection.toJSON())。一貫した適切な結果が必要な場合は、独自のスナップショットを作成する必要があります (たとえば)。

PS:console.log可変引数関数です。必要な数の引数を指定できます。

console.log('index to render', that.collection);

また、コレクションにはモデルのリストが含まれていますが、実際にはリスト自体ではありません。したがって、次のようなことを行っても_.each(collection, ...)、モデルを介してスピンすることはありません。おそらく気にしない一連の内部プロパティを介してスピンします。モデルを反復処理したい場合:

_.each(collection.models, ....)

または、組み込みの Underscore メソッドを使用します。

collection.each(...)
于 2013-09-07T18:06:41.427 に答える
0

Collection は、一部のアンダースコア メソッドも拡張eachします。

that.collection.each(function (gist) {
  // ...
});

以下のコードは同じことを行いますが、最初のコードを使用することをお勧めします。

_.each(that.collection.models, function (gist) {
  // ...
});
于 2013-09-07T17:40:45.990 に答える