1

我已经按照 ember-paper 指南定义了选项数据，如下所示。用户可以从选项中选择任何国家。

  timeZoneOptions: Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ])

这是选择选项的代码。它将显示选项 groupby groupName。

{{#paper-select options=this.timeZoneOptions
        selected=this.timeZone
        onChange=(action (mut this.timeZone)) as |timeZon| }}
        {{timeZon}}
      {{/paper-select}}

我无法使用{{this.timeZone.groupName}}.

如果我想获得groupName基于用户选择的选项，我该怎么办？

4

1 回答 1

1

你在那里的东西似乎是正确的。也许错误在于mut用法，也许它在其他地方。

mut助手很模糊。当 Ember 团队弄清楚如何优雅地做到这一点时，它将被弃用。

mut您可以通过在控制器/组件上创建不同的操作来避免使用帮助程序。

这将让您调试：只需debugger在您的操作中添加一条语句并从那里继续。

经典的 Ember 风格：

import Component from '@ember/component';

export default Component.extend({
  timeZoneOptions: Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ]),

  currentTimeZoneOption: null,

  actions: {
    selectTimeZoneOption(timeZoneOption) {
      this.set('currentTimeZoneOption', timeZoneOption');
    }
  }
});

{{#paper-select
  options=this.timeZoneOptions
  selected=this.currentTimeZoneOption
  onChange=(action 'selectTimeZoneOption')
  as |timeZoneOption|
}}
  {{timeZoneOption}}
{{/paper-select}}

<p>
  Current timezone option:
  {{this.currentTimeZoneOption.groupName}}
</p>

Ember Octane 风格：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  timeZoneOptions = Object.freeze([
    { groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
    { groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
  ]);

  @tracked
  currentTimeZoneOption = null;

  @action
  selectTimeZoneOption(timeZoneOption) {
    this.currentTimeZoneOption = timeZoneOption;
  }
}

<div class="my-component">
  <PaperSelect
    @options={{this.timeZoneOptions}}
    @selected={{this.currentTimeZoneOption}}
    @onChange={{this.selectTimeZoneOption}}
    as |timeZoneOption|
  >
    {{timeZoneOption}}
  </PaperSelect>

  <p>
    Current timezone option:
    {{this.currentTimeZoneOption.groupName}}
  </p>
</div>
于 2020-02-04T08:23:47.717 回答