21

backbone.js モデル fetch メソッドの使用について非常に混乱しています。
次のバックボーン ルータ の例を参照してください。

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 プロパティとは何ですか? モデルオブジェクトが作成された後、プロファイルビューはこれでレンダリングされます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(); の後です。ステートメントを実行すると、モデルからのデータが表示されますが、なぜですか? フェッチがどのように機能するのか本当にわかりません。見つけようとしますが、チャンスはありません。

4

1 に答える 1

48

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

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 を設定してから明示的に URL を設定しているため、指定した urlRoot は無視されます。

バックボーンのソース (驚くほど簡潔です) を調べて、URL がどのように生成されるかを確認することをお勧めします: http://backbonejs.org/docs/backbone.html#section-65

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

これはインスタントではありません。

これはノンブロッキング方式で行われます。つまり、リクエストを行い、実行していることを続行し、リクエストがサーバーから戻ってくると、バックボーンが使用するイベントを発生させます。モデルのデータを取得したので、完了です。

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

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() に渡します。 「同期」イベントは、返されたときにビューを再レンダリングします (3) ビューをインスタンス化するためのコードを成功コールバックに配置します。これにより、ネットワーク リクエストが返され、モデルにデータが返されるまで、ビューは作成されません。 .

于 2013-05-14T14:49:39.960 に答える