如何为相互关联的选择框建模

How to model interrelated select boxes?

本文关键字：选择 建模 关联      更新时间：2023-09-26

在四个相互关联的选择框中有一个树形结构。其思想是在选择category1后，在category2中显示有效选项，在category3和category4中显示有效选项。表单的这一部分可以重复多次。

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

在Backbone中，我收听更改事件，相应地更新连续的选择选项。我不确定如何在烬中构建这种行为。如果一个应用程序能像这样处理相关的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')
});

可以指定一个成员的collectionView和itemViewClass。这个itemViewClass将负责您需要的显示/隐藏功能。每个itemView都应该知道如何显示初始折叠的类别，并知道在单击该视图(类别)时显示扩展的选项列表。

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

相关文章：