Ember 2.x 如何使用来自服务器的数据进行链接下拉

Question

我似乎找不到我的第一个立足点。我找到了一些较旧的 1.x 方法来做我想做的事，但总是来自硬编码数组。

简单地说，我想要一个状态下拉列表，它从我的服务器获取数据。当用户选择州时，我需要县下拉列表从我的服务器中获取该州的县列表。

直接使用 Ajax 和 JS 非常容易，但事实证明学习 Ember 2.x 方法很难。

是否有任何 git 项目、jsbin、twiddle 或类似的东西可以展示执行此操作所需的技术？或者有人有足够的冒险精神来做一个教程吗？

Answer 1

你可以看看example from official guide of ember-power-select。该示例从 github 个存储库中获取数据，其用法非常简单。

关于您提供的答案，我建议进行以下更改：

js 文件是：

import Ember from 'ember';
import config from '../../config/environment';

export default Ember.Component.extend({
  company: null,
  router: Ember.inject.service('-routing'),

  ajax: Ember.inject.service(),
  countyNames: Ember.computed('company.state', function() {
    return this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.map((county)=> {
      return county.name;
    });
  }),

  states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'],

  actions: {
    // For dropdown handling
    chooseState(state) {
      this.set('company.state', state);
    },

    chooseCounty(countyName) {
      this.set('company.county', countyName);
    }
});

模板是：

  {{#power-select
    selected=company.state
    options=states
    onchange=(action "chooseState")
    as |name|
  }}
    {{name}}
  {{/power-select}}

  {{#power-select
    selected=company.county
    options=countyNames
    onchange=(action "chooseCounty")
    as |name|
  }}
    {{name}}
  {{/power-select}}

您提供的答案存在问题；您正在为县下拉列表提供 selected，它是字符串 (company.county)；但是，您的 options 县是 json 对象。因此;当你 select 第二个下拉列表是空的。然而，为了显示第二个下拉列表的初始值，您需要获取初始 selected 州的县名。为了克服这两个问题，我定义了 countyNames computed 属性这将是县下拉列表的选项。这取决于company.state；因此，只要公司状态发生变化，就会重新计算。我还将其定义为仅包含县的名称，以便在您制作 selection 时显示下拉列表的 selected 值。请注意，我提供的代码片段中应该有一些拼写错误，因为我没有尝试过；但我希望这足以让您理解我的观点。最好的问候。

Answer 2

感谢@alptugd 为我指明了正确的方向。这是我所做的，虽然见下文，但我需要一些帮助来完善它：

已安装 ember-power-select

在我的组件（下拉菜单所在的位置）中，我放置了两个下拉菜单，一个用于州，一个用于县（请注意，这里的公司是我的模型）：

  {{#power-select
    selected=company.state
    options=states
    onchange=(action "chooseState")
    as |name|
  }}
    {{name}}
  {{/power-select}}

  {{#power-select
    selected=company.county
    options=counties
    onchange=(action "chooseCounty")
    as |name|
  }}
    {{name.countyName}}
  {{/power-select}}

组件的js文件中：

import Ember from 'ember';
import config from '../../config/environment';

export default Ember.Component.extend({
  company: null,
  router: Ember.inject.service('-routing'),

  ajax: Ember.inject.service(),
  counties: [],

  states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'],

  actions: {
    // For dropdown handling
    chooseState(state) {
      this.set('company.state', state);
      //Ember.set(this, "counties", this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.items));
      this.set('counties', this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json));
    },

    chooseCounty(county) {
      this.set('company.county', county.countyName);
    }
});

现在让我解释一下正在发生的事情。

当状态下拉列表发生变化时，调用 chooseState 操作 (onchange=(action "chooseState")) 设置模型的 company.state 值，然后使用 Ajax 获取该州的县，并将结果分配给组件的县变量。县下拉列表正在从这个县变量 ('options=counties') 获取其值，并将自动使用新值呈现。

现在，在我的例子中，API 正在传回一个对象数组。这意味着我需要指定要在下拉列表中显示的值，我在模板中使用以下行来执行此操作：{{name.countyName}} 如果您只是获取字符串列表，您可以这样做：{{name}}。我还需要将正确的值传回模型，我在 chooseCounty 操作中执行此操作。

这个可以，有两个问题希望大家帮我拨入。

首先，出于某种原因，当您 select 县时，下拉列表保持空白。调用操作并更新模型，因此当您保存记录时，您的数据库一切正常。

其次，我不知道首先填充县下拉列表的位置。我需要在加载模型后执行此操作，以便我们知道我们处于什么状态。

Ember 2.x 如何使用来自服务器的数据进行链接下拉

Ember 2.x How to do linked dropdowns with data sourced from server

ember.js

ember-data