Question

我目前开始使用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登录到控制台（see this previous question）时，Backbone Collections尚未加载。

我也尝试过使用

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

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

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

Answer 1

当您致电Backbone.Firebase.Collection.add时，它不会同步添加到集合中。相反，它将请求发送到Firebase，然后等待返回事件。 See the code here

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

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，因此您不必重新发明任何轮子。

Answer 2

您似乎必须使用Backbone.Firebase.Collection而非Backbone.Collection，这会告诉您默认忽略对fetch或sync的来电。

另外，Backbone.Firebase有一个read和readall方法，可以帮助您入门。似乎Backbone.Firebase.Collection没有继承这种方法，但我不确定。

修改
正如 Kato 在他的评论中所述，似乎你不需要做任何事情。只需使用Backbone.Backfire.Collection和Backbone.Backfire.Model。

如何迭代Backbone Firebase集合？

2 个答案: