指定要在自定义下拉 Ember 组件中使用的属性

Question

我在 Ember 中创建了一个可重复使用的下拉组件：

/app/components/dropdown/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'select',
  classNames: ['form-control'],
  placeholder: null,
  items: null,
  selected: null,
  change: function(event) {
    var items = this.get('items');
    var index = event.target.selectedIndex;
    var selected = items ? items[index - 1] : null;
    this.sendAction('selectedChanged', selected);
  }
});

/app/components/dropdown/template.js

{{#if placeholder}}
<option value="">{{placeholder}}</option>
{{/if}}
{{#each items as | item |}}
<option value="{{item.id}}" selected={{is-equal item selected}}>{{item.name}}</option>
{{/each}}

该组件当前使用 'name' 属性作为选项的标签。但是，我希望能够指定要使用的属性，以使组件更加灵活（这样我有时就可以使用，例如 'displayName'）。

使用旧的 Ember Select 组件，您可以执行以下操作：

{{view "select"
  content=programmers
  optionValuePath="content.id"
  optionLabelPath="content.firstName"
  value=currentProgrammer.id
}}

...并告诉它哪些属性用于值和标签。我想做类似的事情，但我不确定怎么做。（我尝试通读源代码，但有点超出我的理解范围）。提前致谢。

Answer 1

<option value="{{ember-get item optionValuePath}}" selected={{is-equal item selected}}>{{ember-get item optionLabelPath}}</option>

您需要实现 ember-get 助手，在 Ember 2.0 中有一个名为 get 的默认 heper，这将使以下内容变得多余。

import Ember from 'ember';

export function emberGet(params/*, hash*/) {
    return Ember.get(params[0], params[1]);
}

export default Ember.HTMLBars.makeBoundHelper(emberGet);

另请查看 this jsbin，其中包含您要实现的目标的示例。

指定要在自定义下拉 Ember 组件中使用的属性

Specifying which properties to use in a custom drop-down Ember component

components

ember.js