Question

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

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

相反，我有一个HTML模板，分为如下部分：

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

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

任何想法都表示赞赏！

Answer 1

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

这是你想要做的吗？

Answer 2

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

因此，每个子视图都有自己的模型，其中包含用于呈现HTML的值。我认为在这里使用Collection没有任何意义 - 因为你有异类的'fields'/ Models。

之后我会使用类似表单支持模型的东西，它代表表单的当前状态。因此，将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

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

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

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

Answer 4

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

使用带有Backbone集合的下划线模板

4 个答案: