如何将HTML标记分解为Marionette视图？

Question

我是Marionette的新手，并试图了解如何将HTML标记分解为Marionette视图。我的标记是一个简单的Trader桌面，有两个标签：一个显示帐户，另一个显示挂单 - 请参见此处：http://codepen.io/nareshbhatia/pen/cKdur。 “帐户”选项卡进一步划分为LHS上的帐户表和RHS上的帐户图表。这两个视图都应该由同一个模型驱动。使用Bootstrap创建选项卡。你如何将这个标记分解为木偶的观点？

1. 是否可以/明智地安排木偶视图，以便产生这种确切的标记？
2. 如何建模Bootstrap标签？
3. 如何对帐户表和帐户图表进行建模？我当时认为这将是一个有两个区域的木偶布局，但后来开始思考为什么？布局的目的不是能够在每个区域中实例化不同类型的视图吗？在这里，我将始终有两个固定的视图，布局是否过度杀伤？

提前感谢您的时间。

Answer 1

您有3种类型的视图：AppView，TabView和TableView。

AppView - 视图的根目录 - 它可以是单独的Layout，也可以只是Application实例中的某个区域。它负责在页面区域中渲染和关闭子视图。

TabView - 可能是CompositeView或Layout - 取决于你想要在TabView中达到的灵活性 - 它的静态就足够了。如果它是动态的，你可以使用CompositeView并传递标签集合来渲染，但我认为太多了。

TableView - ItemView或CompositeView - 我认为它足以在表视图中呈现模型 - 您知道模型属性并且您可以轻松地构建表视图。如果您的选项卡中可能包含fiew表，则可以使用CompositeView。

我强烈建议您在Marionette查看这些文章 - about tree views和nested views，确保您能找到问题的答案。

希望得到这个帮助。

Answer 2

我认为这是一个解决方案。

布局可能会对帐户标签造成过大的影响，因为您要为同一模型提供图表和帐户以及图表。

只需创建可以访问模型的ItemView，您就可以了（一个模型一个查看此选项卡的一个模板）。您的订单选项卡应该是一个不同的视图，因为您将在那里持有不同的模型。

我的建议是让Main布局有2个区域。每个标签一个。在LHS区域，您应该将ItemView与帐户放在一起，如上所述。在右侧区域，您应该放置一个CompositeView（用于格式化表格）。 CompositeView将保存集合：orderscollection。您的CompositeView将具有ItemView属性。连接到CompositeView的ItemView将保存订单集合的每个模型。如果您查看THIS LINK，我在那里介绍了如何使用ItemView创建CompositeView的代码。