在 Marionette 区域中显示 Backbone Collection 元素

Question

我有一个 Backbone 应用程序正在运行并与 requirejs 一起正常工作。现在，我正在尝试迁移到 Marionette，以便更好地组织代码。

我只想在一个区域中显示一个集合中的模型，在另一个区域中有两个按钮。我想从该集合中转到下一个或上一个模型。并改变它对模型区域的看法。

但我不知道如何遍历集合并将其模型发送到视图。

jsfiddle 用一些简化的代码处理这种情况。

html:

<div class="player"></div>

<script id="layout-template" type="text/template">
    <div class="modelView"></div>
    <div class="controls"></div>
</script>
<script id="model-region" type="text/template">
    <%=name%>
</script>
<script id="control-region" type="text/template">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
</script>

Answer 1

如果我理解您的问题，您正在尝试在同一布局上的两个视图之间协调事件。在这种情况下，我建议设置一个Controller。

然后您可以在您的控件视图上注册视图triggers：

ControlsView = Backbone.Marionette.ItemView.extend({
  // ...

  triggers: {
    "click #previous": "control:previous",
    "click #next": "control:next"
  }
});

然后在您的控制器中，您将实例化您的视图并为 controlView 触发器设置一个处理程序以更新模型视图。

var Router = Marionette.AppRouter.extend({
  appRoutes: {
      "/": "start",
      "/:index" : "showModel"
  },
});

var Controller = Marionette.Controller.extend({

  initialize: function(){
    var self = this;
    this.controlsView = new ControlsView();
    this.modelView = new MainView();
    this.myCollection = new MyCollection();
    this.myIndex = 0;
    this.myCollection.fetch().then(function(){
      self.myIndex = 0;
    });
    this._registerTriggers();
  },
  start: function(){
    this.controlLayout.show(this.controlView);
    this.showModel();
  },
  showModel: function(index){
    index = index || this.index;
    this.modelView.model = myCollection.at(this.index);
    this.modelLayout.show(this.modelView);
  },
  showNext: function(){
    var max = this.myCollection.models.length;
    this.index = max ? 1 : this.index + 1;
    this.showModel();
  },
  showPrevious: function(){
    var max = this.myCollection.models.length;
    this.index = 0 ? max : this.index - 1;
    this.showModel();
  },
  _registerTriggers: function(){
    this.controlsView.on("control:next", this.showNext());
    this.controlsView.on("control:previous", this.showPrevious());
  }
}

var controller = new Controller();
var router = new Router({
  controller: Mod.controller
});
controller.start();

使用这种方法可以将视图和集合解耦。这将使您的代码可重用（以不同上下文中的控件视图为例）。

Answer 2

您正在寻找CollectionView 或CompositeView。

CollectionView 将遍历 指定集合，使用指定的itemView 渲染它们中的每一个， 然后将项目视图的el 的结果附加到集合视图的 el.

CompositeView 扩展自 CollectionView 以用作 复合视图，它应该同时代表一个 树结构中的分支和叶子，或者用于 集合需要在包装模板中呈现。