0

我正在使用 Backbone 构建一个大型 HTML 表单。每个表单字段都是名为 的 Backbone 模型的一个实例Field。我有一个称为Fields获取 JSON 文件并实例化所有表单字段的 Backbone 集合。

这是我的问题：当我呈现表单域的集合时，我不只是想要一个统一的表单域列表。例如，大多数在线骨干教程向您展示如何通过将每个模型的视图包装li在集合元素为ul.

相反，我有一个 HTML 模板，它被分成如下几个部分：

我希望“月”和“年”字段位于一个 div 中，而其他字段位于各自的 div 中。这些字段的样式将使用 CSS 彼此不同。是否可以将大型下划线模板传递给集合并将其模型实例打印到适当的位置？

这是Marionette.Region之类的用例吗？

任何想法表示赞赏！

4

4 回答 4

0

我不确定我是否完全理解您的问题，但我认为您可能需要在您的现场模型中提供更多信息。例如，您可以group在字段模型中包含一个属性，然后在其自己的 div 中呈现同一组中的所有字段。

这是你想要做的吗？

于 2013-07-05T22:28:11.870 回答
0

我会选择另一种方法：将一个模板分解为至少不同的模板（时间、位置、车辆信息），因为这是三个不同的主题，我将在单独的视图中处理它们。之后将时间视图分解为月视图和年视图等。

因此，每个子视图都有自己的模型，其中包含用于呈现其 HTML 的值。我认为在这里使用 Collection 没有任何意义——因为你有异构的“字段”/模型。

之后我会使用类似表单支持模型的东西，它代表表单的当前状态。因此，将 formView 实现为超级视图，将其他视图实现为嵌套视图将是一个不错的选择。

var FormView = new Backbone.View.extend({

initialize: function(){
    //initialize all subviews
    },
    events:{
        "change":"formChanged"
    }
    formChanged:function(element){
        //update formBackingObject aka this.model
    }
});

然后，您可以清楚地将所有视图和一个模型分开来表示当前选择的状态。

于 2013-07-05T23:04:18.010 回答
0

我看到了解决您问题的两种主要方法：

  1. 更简单的方法：使您的表单成为一个大 itemView 并将其传递给具有fields属性的表单模型（这将是您的集合）。然后，在视图中，您需要迭代并生成 html。

  2. 更简洁的方法：为表单使用布局，并将其他布局渲染到“时间”、“位置”等区域（如 Lilith 建议的那样）。例如，“时间”布局将包含“月”和“年”视图。反过来，“月”视图将是一个集合视图，将集合中的每个选项呈现option为select标签。

尽管第一个解决方案往往更易于实现（因为它更接近于传统的无状态 Web 开发），但第二个解决方案将更易于管理。您将能够在每个视图（例如选择标签）上注册事件处理程序，而不会发生命名冲突，并且由于表单的复杂性将被分解为单独的部分，因此以后管理起来会更容易。

于 2013-07-06T07:47:31.850 回答
0

我认为您可以使用 Marionette CollectionView。使用集合视图，您可以为集合中的每个项目指定不同的视图。请参阅文档； https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemview 如果您想控制项目的呈现位置，您可以覆盖 appendHtml 以指示 itemView 的显示方式附加到 collectionView

于 2013-07-08T12:13:51.217 回答