javascript - Backbone Marionette : Reusable UI Elements

Question

我正在构建我的第一个 Backbone Marionette 应用程序，但我对如何将可重用的 UI 添加到我的 View 模板感到困惑，因为这些 UI 元素具有 JavaScript 交互。

我构建了许多 UI 元素，例如下面显示的输入元素。可以通过 JavaScript 与此输入元素进行交互，例如通过单击向上/向下箭头来更改输入的值。

这些 UI 元素应该在多个 View 中一次又一次地重用，并且在任何给定 View 中可以包含这些 UI 元素的许多实例。下面显示了一个此类 View 的模型，其中包含多个 UI 元素。

此 View 的模型可能如下所示，我希望我的 UI 元素的 JavaScript 交互与此 View 的模型交互。换句话说，UI 元素上的 JavaScript 交互必须能够将事件传递给显示 UI 元素的 View 模型。

var fontStyles = Backbone.Model.extend({
    defaults: {
        fontFamily: "Helvetica Neue",
        fontWeight: "Regular",
        color: "rbg(1,197,255)"
        ...
    }
});

---

我的问题

对于结构合理的 Backbone Marionette 应用程序，我应该在哪里定义这些可重用的 UI 元素及其 JavaScript 交互方法，以便我可以在我的所有 View /模块中重用它们？

作为另一个问题，是否可以在模板文件中为这些 UI 元素编写一次 HTML，然后在我的 View 的下划线模板中一次又一次地重复使用该单个 UI 模板文件？或者我是否必须在每个 View 的模板中为我的 UI 元素重复 HTML？

感谢您的帮助，如果我的问题不清楚，请告诉我。

Answer 1

您应该将此元素创建为 Marionette.ItemView 的扩展
应创建每个项目 View 并将其放置到要使用它们的布局内区域
当然，因为它是 ItemView，所以它包含 template:some_template，或者 Marionette.Layout 扩展，如果它们本身也包含区域的话

所以，至于你的照片小图是ItemView大图是Layout，里面包含了很多region，每个region包含了widget，也就是ItemView。

Layout 在初始化时接收 model:some_model(Layout 是 ItemView 的扩展)