Javascript 如何为相关的选择框建模？

在四个相互关联的选择框中有一个树状结构。其思想是，在选择

category1

后，它会在

category2

中显示有效选项，依此类推

category3

和

category4

。表单的这一部分可以重复多次

例如：用户可以拥有任意数量的车辆。第一类是车辆类型（卡车、轿车等），第二类是品牌，第三类是颜色，第四类是燃油类型

在主干网中，我收听更改事件，相应地更新后续的选择选项。我不知道如何在余烬中组织这种行为。举一个应用程序的例子，它可以与类似这样的相关DOM元素/事件一起工作，这将非常棒

我的第一次尝试是为表单创建一个视图，该视图将侦听选择框上的

输入
（更改）事件。但是selects本身就是视图，我不能很容易地引用相关的视图。我如何建模

编辑：

在控制器中解决此问题，观察一个选择中的更改以填充其他选择，如：

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')
});

您可以指定一个带有
itemViewClass
的余烬的
collectionView
。此
itemViewClass
将负责您所需的显示/隐藏功能。每个
itemView
都应该知道如何显示初始折叠的类别，并知道在单击该视图（类别）时显示扩展的选项列表

如果有树状结构，可以使用递归对视图建模，并维护父类别-子类别关系。
谢谢！似乎
collectionView
对于表示类似于数组的结构很有用，但在本例中，它总是有四个选择框，具有相互关联的行为<代码>项目视图
第2个选项根据在
项目视图
第1个选项中选择的内容而有所不同。你认为这仍然有意义吗？看起来他们可以互相交流，这里有一个例子：。我们将努力解决问题并保持联系！如果在
itemView
的模板中，我放置了一个
视图Ember.Select
我遇到了相同的上下文问题，在这里我得到了与Select的模型的双向绑定，而不是其他选择框的状态。不知道如何继续。所以我通过控制器连接它们，明天我将详细说明我是如何做到的。谢谢你的回答！