2

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

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

用户界面元素

这些 UI 元素应该在多个视图中一次又一次地重用，并且在任何给定视图中都可以包含这些 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？

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

4

1 回答 1

0

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

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

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

于 2013-09-24T21:49:48.813 回答