获取 Ember 中另一个 select 控件的值

Question

我的情况是我有一个 table，用户可以在其中添加供应商，并编辑任何现有供应商（因此可能有多个记录）。其中三个字段（类型、名称、版本）来自 API（后端数据库中的一个 table）返回的查找对象。

点击前'edit'

处于编辑模式

问题是，我需要这些 select 元素是 "chained"（或级联），但由于它们是从同一个对象填充的，所以它更像是 select "Type" 的离子将过滤可用于 "Name" 的选项，同样，selecting 名称将进一步限制可用于版本的选项。

但是，由于这只是一个正在编辑的记录，这些 select 位于 {{#each supplier in suppliers}} 块中以生成行，如果该记录的 isEditing 属性为真，因此值或 selection 是每条记录的值，例如supplier.type 而不是整个控制器上的单个属性。

我试图想出多种方法来做到这一点，但到目前为止还没有找到解决多条记录级联下拉列表的方法，因为这意味着任何一条 select 的值都取决于记录。

如果我知道如何从控制器中引用 Type 下拉列表的值，我想我可以让选项过滤起作用，但话又说回来，可以想象两条记录可以同时处于编辑模式，所以修改控制器上的任何属性以填充 select 也会影响其他人，这并不好。我真的很想弄清楚这一点，所以我不必弹出模式对话框来编辑记录。

Answer 1

您应该使用组件分别处理每一行。

假设您有这样的事情：

{{#each suppliers as |supplier|}}
  // .. a lot of if's, selects and others
{{/each}}

如果您发现自己在使用 {{#each}} 助手并且传递给该助手的代码块不止一行，那么这是一个好兆头，您可能需要一个组件.

如果您创建一个名为 SupplierRow 的组件，您可以按如下方式创建：

module export Ember.Component({
  editing: Ember.computed.alias('model.isEditing'),
  types: Ember.computed('passedTypes', function() {
    // .. return types array for that exact supplier 
  }),
  names: Ember.computed('passedNames', 'model.type', function() {
    // .. return names array for that exact supplier based on possibleNames and model.type
  }),
  versions: Ember.computed('passedVersions', 'model.type', 'model.name', function() {
    // .. return versions array for that exact supplier based on possibleVersions and model.type and model.name
  }),
  actions: {
    saveClicked() {
      this.sendAction('save', this.get('model'));
    }
  }
});

该模板基本上看起来与您当前在 {{#each}} 助手中的模板相似。它会被渲染成这样：

{{#each suppliers as |supplier|}}
  {{supplier-row model=supplier possibleTypes=types possibleNames=names possibleVersions=versions save="save"}}
{{/each}}

Answer 2

似乎您使用的是旧版本的 Ember，它允许在 {{#each}} 助手中进行上下文切换。假设您可以为每次迭代设置 itemController 并分别处理每行的 select 可用值：

{{#each suppliers itemController="supplierController"}}
    // this == supplierController, this.model == supplier
{{/each}}

因此，在 supplierController 中，您可以计算每个供应商的 select 含量。您还可以通过 this.parentController 属性.

从项目控制器访问主控制器

获取 Ember 中另一个 select 控件的值

Get the value of another select control in Ember

ember.js

html-select

dropdownbox

cascadingdropdown