Question

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

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

在Backbone中，我收听了更改事件，相应地更新了连续的选择选项。而且我不确定如何在Ember中构建这种行为。与这样的相关DOM元素/事件一起使用的应用程序示例非常棒。

我的第一次尝试是为表单创建一个视图，该视图将在选择框上侦听input（更改）事件。但选择本身就是观点，我不能轻易地引用相互关联的观点。我该如何建模？

编辑：

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

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

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

如果你有一个树状结构，你可以使用递归来建模视图并维护父类别 - 子类别关系。

如何建立相互关联的选择框？

1 个答案: