1

私は一般的にコーディングを始めたばかりで、Rails と一緒に Backbone を取り上げています。テンプレート内でコレクション データを反復しようとして失敗しました。何が問題なのかわかりません。Web ページをロードすると、json データとテンプレートの一部は正常にロードされるように見えますが、反復のあるビットは失敗します。コードは次のとおりです。

取得.js:

var Acquisition = Backbone.Model.extend({
});

取得.js:

var Acquisitions = Backbone.Collection.extend({
  model: Acquisition,
  url: '/acquisitions.json'
});

Acquisitions_index.js:

var AcquisitionsIndex = Backbone.View.extend({
    tagName: "table",
    render: function() {
      this.$el.html(JST['acquisitions/index']({ collection: this.collection }));
      return this;
    }
});

index.jst.ejs:

<tbody>
  <tr>
    <th>Cash(USD)</th>
    <th>Date</th>
  </tr>
  <% collection.each(function(model) { %>
  <tr>
    <td><%= model.escape('cashUSD') %></td>
    <td><%= model.escape('date') %></td>
  </tr>
  <% }); %>
</tbody>

home.html.erb:

<header>
  <h1>Startup acquisitions</h1>
</header>
  <div id="app"></div>
<script>
  var acquisitions = new Acquisitions;
  acquisitions.fetch();

  var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions});
  acquisitionsIndex.render();
  $("#app").append(acquisitionsIndex.el)
</script>
4

1 に答える 1

1

mu が短すぎるという正しいアドバイスを回答に入れるには、AJAX の「A」が非同期を表していることを理解することが重要です。つまり、フェッチを行うと、クライアント側の JavaScript が実行され続けることを意味します。ブロックせず、フェッチが返されるのを待ちます。したがって、コードは次のようになります。

  1. コレクションを取得する
  2. コレクションアイテムをレスポンスとして受け取る
  3. ビューを作成
  4. ビューでコレクションをレンダリングします:)

あなたは実際に経験しています：

  1. コレクションを取得する
  2. ビューを作成
  3. ビューで空のコレクションをレンダリングします:(
  4. コレクション アイテムを応答として受け取ります (そこで何が起こったのですか?)。

mu が短いコメントを意味するように、ここでイベントが登場します。例として、コード ブロックを次のように修正できます。

var acquisitions = new Acquisitions;
var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions});
acquisitionsIndex.listenTo(acquisitions, "sync", acquisitionsIndex.render);
acquisitions.fetch();

このコードは、ビューが"sync"コレクションのイベントをリッスンしていることを意味します。これは、コレクションがサーバーから正常に同期されたことを示します。syncイベントが発生すると、関数renderの最後の引数であるため、ビューの関数が呼び出されlistenToます。ビューがドキュメントに確実に挿入されるようにするには、render 関数を次のように変更します。

render: function() {
    this.$el.html(JST['acquisitions/index']({ collection: this.collection }));
    $("#app").append(this.$el);
    return this;
}

ビュー レンダー呼び出しをチェーンしている場合は、$("#app").append(this.$el);すべてのチェーンを完了した後にドキュメントの挿入を行う方がおそらく良いことに注意してください (複数のドキュメントのリフローを防ぐためですが、この例では簡単にするために、この行をレンダー関数に入れています。

于 2013-07-11T20:32:08.247 に答える