骨干收集、后端混淆、木偶实现

Question

我是所有后端方面的新手，所以希望这是我要回顾并认为“伙计，我太傻了”的问题之一。让我开始吧。我想制作一个可以在屏幕上绘制矩形的应用程序。 每个矩形都是由ItemView 表示的模型，每个屏幕都是由CollectionView 表示的集合。一旦用户创建了矩形，它们就会被动态添加到集合中。

当用户点击“新屏幕”按钮时，会发生以下情况

 MyController = Backbone.Marionette.Controller.extend({
  initialize:function() {
    i=0;
  },

  newScreen: function() { 
      i=i+1;
      this.collection = new Rectangles([],{id: i});
      routestring = "screen/"+i;
      router.navigate(routestring);
      canvas.show(new ScreenView({collection: this.collection})); 
  },
...

我为不同的屏幕使用了一个迭代器，所以我的后端看起来像这样

demo.firebaseio.com/screens/1

我正在使用Firebase's backbone bindings，但我完全不知道如何访问已经存储在服务器上的集合。原因是我希望能够浏览不同的屏幕，从该 url 获取集合，然后呈现它......

这是我的收藏代码

Rectangles = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.id = options.id;
  },
  url: function() {
    return 'https://demo.firebaseio.com/screen/'+this.id;
  },

  model: Rectangle,
  firebase: function() {
    return new Backbone.Firebase("https://demo.firebaseio.com/screen/"+this.id)
  }
});

这是我的路由器代码！

var Router = Backbone.Marionette.AppRouter.extend({
  controller: myController,
      appRoutes: {
      '': 'newScreen',
      'screen/:number': 'doSomething'
    }
})

我愿意接受任何建议，并且我明白我可能做错了什么！

Answer 1

以下应该有效：

Rectangles = Backbone.Collection.extend({
  firebase: new Backbone.Firebase("https://demo.firebaseio.com/screens/"+this.id),
});

但是，您需要调用 Collection.sync() 来最初获取数据。另一种方法是使用Backbone.Firebase.Collection 形式的真正实时集合：

Rectangles = Backbone.Firebase.Collection.extend({
  firebase: new Firebase("https://demo.firebaseio.com/screens/"+this.id),
});

在这种情况下，您不必调用 fetch/sync/save 等 - 集合始终与 Firebase 保持同步。这里有更多关于它是如何工作的文档：http://firebase.github.io/backfire/