0

我正在使用 Backbone.js、node.js 和 socket.io 构建一个实时提要应用程序。

我Feed是Update模型的集合。显示这些，覆盖Backbone.sync与socket.io工作正常。

复杂之处在于每个Update都有一组与之相关的评论。当我Update在视图中显示每个Feed视图时，我想显示相关评论的摘要（评论数量和单个“最受欢迎”评论），并且还能够单击不同的视图以单独显示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

对于第一季度：

  • 我假设您使用ioSync 之类的东西在 Backbone.sync 中使用 socket.io 而不是 REST API 或类似的解决方案。
  • 将元数据（例如评论数）作为属性包含在Update. 如果您的Update对象本身很重，您可以使用ioBind和自定义服务器端 socket.io 事件来更新计数，而不是每次都发送整个对象。
  • 将属性topComment作为附加的一对一关系包含在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)
  }
});

  • Update在获取然后尝试使用fetchRelated解决它们时避免为所有评论发送 ID 。我很难学会这一点：O/

  • 您还可以将评论集合直接存储在视图上，而无需将其关联为Update

对于第二季度：

我没有任何经验，layoutmanager因为我使用Backbone.Marionette来管理我的视图。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 回答