0

我目前开始使用Firebase作为我的持久性后端解决方案。

我发现使用 Backfire 创建新对象并将其持久保存到 Firebase 很容易

collection.add(obj)

当我尝试从服务器获取 Firebase 集合时，问题就出现了。例如，当我尝试

console.log(collection);

我得到这个输出：

=> {length: 0, models: Array[0], _byId: Object, _events: Object, constructor: function…}

这导致一个空的模型数组

console.log(collection.models);
=> []

经过一番搜索，我发现在我尝试将其记录到控制台时，Backbone Collections 尚未加载（请参阅上一个问题）。

我也尝试过使用

Backbone.Collection.extend({
  model: Todo,
  firebase: new Backbone.Firebase("https://<your-namespace>.firebaseio.com")
});

从服务器explicitly调用fetch并使用成功回调也没有成功。

我的问题是：如何获取 Firebase 集合并从中填充 DOM？

4

2 回答 2

2

当您调用 时Backbone.Firebase.Collection.add，它不会同步添加到集合中。相反，它将请求发送到 Firebase，然后等待返回事件。请参阅此处的代码

因此，如果您立即尝试阅读该集合，您将看到零个元素。但是，如果您尝试这样的事情：

collection.once('add', function() { console.log(collection.length); });

您将看到已添加的元素。

请记住，我们在这里处理的是实时数据，因此当您想要填充 DOM 时，您不应该考虑单个事务，而是依赖事件并随手获取所有内容（实时）。

因此，要填充 DOM，请在您的视图中执行以下操作：

Backbone.View.extend({
   render: function() {
      this.listenTo(this.collection, 'add', this.rowAdded);
   },

   rowAdded: function(m) {
      /* use `m` here to create your new DOM element */
   }
});

此外，您可能想查看一个不错的绑定库，例如ModelBinder，以帮助您处理不断变化的 DOM，这样您就不必重新发明任何轮子。

于 2013-05-31T15:15:50.200 回答
1

看来您必须使用 aBackbone.Firebase.Collection而不是 a Backbone.Collection，它会告诉您您的呼叫fetch或被sync静默忽略。

此外，Backbone.Firebase's 有 aread和 areadall方法可以帮助您入门。它似乎Backbone.Firebase.Collection没有继承这种方法，但我不确定。

编辑：
正如加藤在他的评论中所说，似乎你不需要做任何事情。只需使用Backbone.Backfire.Collection和Backbone.Backfire.Model。

于 2013-05-31T14:01:26.083 回答