Backbone Marionette：可重用的UI元素

Question

我正在构建我的第一个Backbone Marionette应用程序，但我很困惑如何在我的视图模板中添加可重用的UI，其中这些UI元素具有JavaScript交互。

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

这些UI元素应该在多个视图中一次又一次地重复使用，并且在任何给定视图中都可以包含这些UI元素的许多实例。包含多个UI元素的一个此类视图的模型如下所示。

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

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

---

我的问题

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

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

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

Answer 1

您应该将此元素创建为Marionette.ItemView的扩展名 应创建每个项目视图并将其放置在要使用它们的布局内的区域中 当然，因为它是ItemView，它包含模板：some_template， 或Marionette.Layout扩展，如果它们本身也包含区域

所以，对于你的照片 小图片是ItemView 大图是布局，其中包含多个区域，每个区域都包含小部件，即ItemView。

布局接收模型：初始化时some_model（布局是ItemView的扩展名）