javascript - 如何对相互关联的选择框进行建模？

Question

我在四个相互关联的选择框中有一个树状结构。这个想法是，选择 category1 后，它会显示 category2 中的有效选项，对于 category3 和 category4 依此类推。表单的这一部分可以重复多次。

示例:用户可以拥有任意数量的车辆。第一类是车辆类型(卡车、汽车等)，第二类是品牌，第三类是颜色，第四类是燃料类型。

在 Backbone 中，我监听了更改事件，相应地更新了连续的选择选项。我不知道如何在 Ember 中构建这种行为。如果有一个与此类相关 DOM 元素/事件配合使用的应用程序示例，那就太棒了。

我的第一次尝试是为表单创建一个 View ，它将监听选择框上的输入(更改)事件。但选择本身就是 View ，我无法轻松引用相互关联的 View 。我该如何建模？

编辑:

在 Controller 中解决了这个问题，观察一个选择中的变化以填充其他选择，例如:

Ember.ObjectController.extend({
  optionsA: [A1, A2, A3],
  optionsB: [],
  populate: (function() {
    that = this;
    $.map(window.TREE, function(data, groupName) {
      if ($.inArray(that.get('a'), data.as) >= 0) {
        return that.set('optionsB', data.b);
      }
    });
  }).observes('a').on('init')
});

Answer 1

您可以拥有指定了 itemViewClass 的 ember 的 collectionView。此 itemViewClass 将负责您需要的显示/隐藏功能。每个 itemView 应该知道如何显示初始折叠类别，并知道如何在单击该 View (类别)时显示扩展选项列表。

如果您有树状结构，则可以使用递归来建模 View 并维护父类别-子类别关系。