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

Question

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

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

相反，我有一个HTML模板，该模板分为以下几部分：

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

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

任何想法表示赞赏！

Answer 1

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

这是您要做什么？

Answer 2

我会选择另一种方法：将一个模板至少分成不同的模板（时间，位置，VehicleInfo），因为这是三个不同的主题，我将在单独的视图中进行处理。 之后，将时间视图分解为月视图和年视图，依此类推。

因此，每个子视图都有其自己的模型，该模型具有用于呈现其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
    }
});

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

Answer 3

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

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

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

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

Answer 4

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