web-dev-qa-db-ja.com

Backbone.jsモデルフェッチメソッドの仕組み

私は、backbone.jsモデルフェッチメソッドの使用について非常に混乱しています。次の例をご覧ください
バックボーンルーター：

profile: function(id) {
  var model = new Account({id:id});
  console.log("<---------profile router-------->");
  this.changeView(new ProfileView({model:model}));
  model.fetch();
}

最初のステップでは、モデルアカウントがインスタンス化され、アカウントモデルは次のようになります。

define(['models/StatusCollection'], function(StatusCollection) {
  var Account = Backbone.Model.extend({
    urlRoot: '/accounts',

    initialize: function() {
      this.status       = new StatusCollection();
      this.status.url   = '/accounts/' + this.id + '/status';
      this.activity     = new StatusCollection();
      this.activity.url = '/accounts/' + this.id + '/activity';
    }
  });

  return Account;
});

urlRootプロパティとは何ですか？モデルオブジェクトの作成後、profileviewはこれでレンダリングされますthis.changeView（new ProfileView（{model：model}））;、changeview関数は次のようになります。

changeView: function(view) {
  if ( null != this.currentView ) {
    this.currentView.undelegateEvents();
  }
  this.currentView = view;
  this.currentView.render();
},

ビューをレンダリングした後、プロファイル情報はまだ表示されませんが、model.fetch（）;ステートメントの実行後、モデルからのデータが表示されます、なぜですか？フェッチがどのように機能するかは本当にわかりません。見つけようとしますが、チャンスはありません。

backbone.jsmodel
19
zero_coding

ここにあなたの質問が何であるかは完全にはわかりませんが、できることを説明するために最善を尽くします。

UrlRootの背後にある概念は、ベースURLであり、そのurlRootに追加されたIDでその下に子要素がフェッチされるということです。

たとえば、次のコード：

var Account = Backbone.Model.extend({
    urlRoot: '/accounts'
});

ベースURLを設定します。次に、これをインスタンス化してfetch（）を呼び出す場合：

var anAccount = new Account({id: 'abcd1234'});
anAccount.fetch();

次のリクエストが行われます。

GET /accounts/abcd1234

そこでのケースでは、urlRootを設定してから、明示的にurlRootを設定して、指定したurlRootが無視されるようにします。

Backboneソース（驚くほど簡潔）を調べて、URLがどのように派生するかを確認することをお勧めします。 http://backbonejs.org/docs/backbone.html#section-65

他の質問に答えるために、プロフィール情報がすぐに表示されない理由は、fetch（）がネットワークに出て、サーバーに行き、表示される前に応答を待たなければならないからです。

これは瞬時ではありません。

これは非ブロッキング方式で行われます。つまり、リクエストを作成し、実行中の処理を続行します。サーバーからリクエストが返されると、Backboneが使用するイベントを発生させ、モデルのデータを取得したので、完了です。

ここで何が起こっているのかを説明するために、スニペットにコメントを入れました。

profile: function(id) {
  // You are instantiating a model, giving it the id passed to it as an argument
  var model = new Account({id:id});
  console.log("<---------profile router-------->");

  // You are instantiating a new view with a fresh model, but its data has 
  // not yet been fetched so the view will not display properly
  this.changeView(new ProfileView({model:model}));

  // You are fetching the data here. It will be a little while while the request goes
  // from your browser, over the network, hits the server, gets the response. After
  // getting the response, this will fire a 'sync' event which your view can use to
  // re-render now that your model has its data.
  model.fetch();
}

したがって、モデルがフェッチされた後にビューが更新されるようにするには、いくつかの方法があります：（1）成功コールバックをmodel.fetch（）に渡す（2）ビューウォッチにハンドラーを登録する'sync'イベント、戻るときにビューを再レンダリングします（3）ビューをインスタンス化するためのコードを成功コールバックに配置します。これにより、ネットワークリクエストが返され、モデルにデータが含まれるまでビューが作成されません。 。

43
Victor Quinn