0

Backbone.js、node.js、socket.io を使用してリアルタイム フィード アプリケーションを構築しています。

私FeedはUpdateモデルのコレクションです。Backbone.syncこれらを表示し、との統合のためにオーバーライドすると正常にsocket.io動作します。

複雑なのは、それぞれUpdateに一連のコメントが関連付けられていることです。ビューにそれぞれを表示するときにUpdate、Feed関連するコメントの概要 (コメントの数と 1 つの「最も人気のある」コメント) を表示し、クリックして別のビューに移動して、それぞれUpdateを個別に表示することもできます。詳細なデータを含むコメントのページ分割されたリスト。

次のように、モデルとモデルbackbone-relationalの間の関係をモデル化するために使用しています。UpdateComment

Feed (collection) -> Update (model) -(has many)-> Comment (model)

私はこのbackbone-relationalチュートリアルに従ってきましたが、関連するすべてのデータを一度にメモリに入れたいと思っているようですFeed。

http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/

私の質問は次のとおりです。

  1. Updateすべてのコメント データをロードせずにFeedビューのそれぞれにコメントの要約データを取り込み、ページ分割された完全なデータをビューに表示する機能を維持するにはどうすればよいUpdateですか?
  2. backbone.layoutmanagerビューのレンダリングに使用しています。上記を達成するには、どのようにビューを分割するのが最善ですか?
4

1 に答える 1

1

第 1 四半期:

  • ioSync のようなものを使用して、REST API の代わりに Backbone.sync でsocket.ioを使用するか、同様のソリューションを使用していると想定しています。
  • の属性としてメタデータ (コメント数など) を含めますUpdate。Updateオブジェクト自体が重い場合は、毎回オブジェクト全体を送信するのではなく、ioBind とカスタムのサーバー側 socket.io イベントを使用してカウントを更新できます。
  • topCommentに追加の 1 対 1 の関係としてアトリビュートを含めますUpdate。Updateサーバーから最初にロードするときはtopComment、応答に含めますが、他のコメントは含めません。

  • カスタム socket.io イベントを使用して、残りのコメントを遅延読み込みします。updateId、startIndex、をパラメーターとして受け取るサーバー側ハンドラーが必要になる可能性があります。これは、指定されたインデックスから始まるmaxComments指定されたコメントのリストを返します。Update結果が JSON としてクライアントに送信される場合、クライアントで次のようなことを行うのは簡単です。

    // Assume `model` is an instance of `Update`.
socket.emit('get_comments_page', {
  updateId: model.get('id'),
  startIndex: 1,
  maxComments: 10
}, function(err, data) {
  if (err) {
    alert('Unable to fetch comments: ', err);
  } else {
    model.get('messages').reset(data)
  }
});

  • 取得時にすべてのコメントの ID を送信してから、それらを解決するためUpdateに使用することは避けてください。fetchRelated私はこれを難しい方法で学びました:O/

  • の関係として関連付けずに、コメント コレクションをビューに直接保存することもできます。Update

第 2 四半期:

ビューの管理にBackbone.Marionettelayoutmanagerを使用しているため、経験がありません。Marionette には非同期拡張機能があります(免責事項: 私は共同メンテナです)。サーバーからデータが到着するのを待って、Marionette.async が遅延レンダリングを行う方法を確認することをお勧めします。

主なアイデアは、データがサーバーから戻ってきたときに解決される jquery の Deferred オブジェクトを使用することです。上記の例を deferred で拡張すると、次のようになります。

var MyView = Backbone.View.extend({
  // ... normal stuff that views need ...
  initialize: function() {
    var deferred = $.Deferred();
    // Assume `model` is an instance of `Update`.
    var that = this;
    socket.emit('get_comments_page', {
      updateId: that.model.get('id'),
      startIndex: that.options.pageNumber,
      maxComments: 10
    }, function(err, data) {
      if (err) {
        alert('Unable to fetch comments: ', err);
      } else {
        that.model.get('messages').reset(data)
      }
      deferred.resolve();
    });
    this.promise = deferred.promise();
  },

  render: function() {
    var that = this;
    this.promise.done(function() {
      // Do your normal rendering code here, for instance:
      $(that.el).html(that.template(that.model.toJSON()));
    });
    return this;
  }
});

注: 上記のコード スニペットはそのままではテストされていません。

于 2012-10-29T06:03:07.777 に答える