将下划线模板与 Backbone 集合一起使用答案

【问题标题】：Using an underscore template with a Backbone collection将下划线模板与 Backbone 集合一起使用
【发布时间】：2013-07-05 22:19:53
【问题描述】：

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

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

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

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

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

感谢任何想法！

【问题讨论】：

我认为您错误地使用了 Backbone。表单应该渲染一个模型，并且应该是一个真正的模板，因为你并没有真正循环任何东西

标签： javascript backbone.js underscore.js marionette

【解决方案1】：

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

更简单的方法：让你的表单成为一个大的 itemView 并传递一个带有 fields 属性的表单模型（这将是你的集合）。然后，在视图中，您需要迭代并生成 html。
更简洁的方式：为表单使用布局，并将其他布局渲染到“时间”、“位置”等区域（如 Lilith 建议的那样）。例如，“时间”布局将包含“月”和“年”视图。反过来，“月”视图将是一个集合视图，将集合中的每个选项呈现为select 标记的option。

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

【讨论】：

【解决方案2】：

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

这是你想要做的吗？

【讨论】：

这是可能的。然后我会为每个group 创建一个子视图吗？

【解决方案3】：

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

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

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

var FormView = new Backbone.View.extend({

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

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

【讨论】：

【解决方案4】：

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

【讨论】：