第 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;
}
});
注: 上記のコード スニペットはそのままではテストされていません。