BackboneFire是否支持使用AutoSync模型的非自动同步集合？

Question

基本上我想把这个设置好：

var Game = Backbone.Model.extend({
    defaults: {
    },
    autoSync: true
});

var Games = Backbone.Firebase.Collection.extend({
    url: 'https://<myapp>.firebaseio.com/games',
    autoSync: false,
    model: Game
});

每个游戏应该是自动同步与服务器数据，但我不想听整个child_*火基系列事件。目标是更新单个项目视图，而不是重新绘制整个列表。

向在场的人致以良好的问候和愉快的编码;)

Answer 1

您可以使用启用了Backbone.Firebase.Collection的autoSync来更新各个项目。若要重新呈现单个项，需要在项目触发更改事件时侦听。这个概念显示在Firebase文档中的BackboneFire Quickstart中。

但是，您不能将Backbone.Firebase.Model和Backbone.Firebase.Collection混为一谈。

Todo模型与集合

在下面的示例中，请注意常规Backbone.Model是如何在Backbone.Firebase.Collection中使用的。默认情况下，集合已启用autoSync。

// A simple todo model
var Todo = Backbone.Model.extend({
  defaults: { title: "New Todo" }
});

// Create a Firebase collection and set the 'firebase' property
// to the URL of your Firebase
var TodoCollection = Backbone.Firebase.Collection.extend({
  model: Todo,
  url: "https://<your-firebase>.firebaseio.com"
});

Todo视图

下面的示例是单个待办事项的视图。在initialize函数中，listenTo方法用于侦听模型的change事件。每次模型被远程更新或本地更新时，change事件都会被触发(该事件会远程地保持更改)。

// A view for an individual todo item
var TodoView = Backbone.View.extend({
  tagName:  "li",
  template: _.template("<%= title %>"),
  initialize: function() {
    // whenever the model changes trigger a re-render of the single view
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
});

呈现列表

设置了TodoView之后，列表也可以轻松地呈现出来。在下面的initialize函数中，我们会听到collection，它将是一个TodoCollection。每当将项添加到集合中时，就会执行addOne函数。addOne函数简单地将一个新的TodoView附加到页面中。

// The view for the entire application
var AppView = Backbone.View.extend({
  el: $('#todoapp'),
  initialize: function() {
    this.list = this.$("#todo-list"); // the list to append to

    // by listening to when the collection changes we
    // can add new items in realtime
    this.listenTo(this.collection, 'add', this.addOne);
  },
  addOne: function(todo) {
    var view = new TodoView({model: todo});
    this.list.append(view.render().el);
  }
});