MarionetteJS:使用具有两个或更多视图的集合来处理不同的布局

时间:2013-07-11 20:57:10

标签: backbone.js marionette

我有一个UI控制器,为简单起见,您可以将其视为文件夹树,您可以在其中选择带有复选框的多个文件夹。选择保存在模型中并且“保存”时很少也会触发一些操作。

出于可用性原因,我们希望使用同一控制器的两种不同可视化。两个UI控制器可以在某些布局中同时出现,而在其他布局中只有一个布局。

能够在2个UI控制器上重用相同的集合实例会很好。

我可以很容易地在一个模块中执行此操作但是如何构建代码以使其在不同模块中工作?我正在考虑使用模型和集合类,一个模块使用View1,另一个模块使用View2,但是放置集合实例并使其与世界其他地方进行通信的最佳位置。

在Marionette中使用两个或多个视图共享Backbone模型/集合实例的最佳做法是什么?

1 个答案:

答案 0 :(得分:3)

一种方法是将您的实体(模块/集合)放在一个单独的模块中,让各种模块请求它们。

实体模块示例(包含集合定义和请求处理程序):https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/contact.js#L89

请求集合的示例(第7行):https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L7

在您的情况下,如果需要,可以重复使用相同的实例。但请确保您有一些机制来显示合理的新数据(即在服务器上获取集合以获取最新数据)。

你可以使用javascript的闭包机制,例如:

ContactManager.module('Entities', function(...){
  var contacts = new Entities.ContactCollection(...);
  contacts.fetch();

  ContactManager.reqres.setHandler("contact:entities", function(){
    return contacts;
  });

  ContactManager.commands.setHandler("contact:entities:update", function(){
    return contacts.fetch();
  });
});

然后,在您的应用中,您使用ContactManager.request("contact:entities")来获取联系人,并ContactManager.execute("contact:entities:update")

请求和命令之间的区别基本上是语义的:从应用程序的另一部分请求数据,而不是命令完成一些工作。

使用请求响应可以更好地设计应用程序(松散耦合,封装)。将数据附加到App.SomeNamespace.mycollection也可以(我在某些情况下已经完成),但它会导致紧密耦合,破坏封装,我不建议将它用于大型应用程序。