Javascript 主干木偶：可重用的UI元素

我正在构建我的第一个主干木偶应用程序，但我不知道如何将可重用的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)"
        ...
    }
});

---

我的问题

对于一个结构合理的主干网木偶应用程序，我应该在哪里定义这些可重用的UI元素及其JavaScript交互方法，以便在所有视图/模块中重用它们

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

---

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

您应该将此元素创建为木偶。ItemView的扩展
应创建每个项目视图，并将其放置在要使用它们的布局内的区域中
当然，因为它是ItemView，所以它包含了模板：一些\u模板， 布局扩展，如果它们本身也包含区域

那么，你的照片呢 小图片是ItemView 大图是布局，其中包含许多区域，每个区域包含小部件，即ItemView

---

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

谢谢Tigra的回答。我发现另一个选择是简单地在单个文件中编写UI交互，并在我的RequireJS定义中填充。然后，在我的主干视图中，我只监听输入字段上的值更改事件，而不监听JavaScript交互。