使用 Marionette 创建复杂视图（表单）答案

【问题标题】：Create complex view (form) with Marionette使用 Marionette 创建复杂视图（表单）
【发布时间】：2012-08-28 14:26:55
【问题描述】：

我想用 Backbone.Marionette 创建一个复杂的表单。我觉得表格应该是这样的：

产品或付款的任何更改都应影响“销售”模式。模型结构为：

sale   :   {
    date        :             '10/01/2010',
    customer    :             'Jaime Rivera'
    products    :             [{product_name:'ZZZZZZ', price: 100, quantity: 2},
                               {product_name:'yyyyyy', price: 33, quantity: 1}],
    payments    :             [{type:'check', other_data: '', amount: 160},
                               {type:'credit-card', other_data: '', amount: 73}] 
}

我想知道构建视图以创建表单的最佳方式。我不确定我应该使用 layout、compositeview 还是 collectionview。

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

有多种方法可以让 Marionette 的观点发挥作用，而且它们都不一定是对或错。有些会更好地满足您的其他约束条件，例如需要使用哪些数据来呈现此内容、需要处理哪些事件等。

不过，鉴于您显示的数据，这看起来像一个带有两个 CompositeView 的布局。

布局将呈现日期选择器、输入框和两个用于产品和付款的空 div。这些空 div 中的每一个都会在布局中关联一个区域定义，因此您可以显示产品和付款。

然后您可以为产品创建一个 CompositeView - 一个呈现产品列表和“添加产品”按钮的模板。 CompositeView 本身将处理 Add Product 按钮的单击。将指定一个 ItemView 来呈现列表中的每个产品。

付款方式与产品相同。

...再次，这只是使其工作的一种选择。您可以使用一个 Layout 和 2 个 Collection 视图来完成整个事情，或者将整个事情作为一个 ItemView 来完成（这将很难维护，但仍然可能）。

希望对您有所帮助。

【讨论】：