Ember select 和查询参数。变得不确定

Question

我正在尝试 select 一个选项，一旦它被 selected，获取对象的值并用该值更改 url。

现在，我在 url:

中变得不确定

http://localhost:4200/product?company=undefined

控制器：

import Ember from 'ember';

 export default Ember.Controller.extend({
   queryParams: ['company'],
   company: null,
    .......

   actions: {
     selectCompany: function(value) {
     this.set('company', value);
      }
    }

 });

模板：

<select {{ action 'selectCompany' company.id on='change' }}>
    {{#each sortedTraitsAsc as |company|}}
       <option value={{company.id}}>  {{company.value}}</option>
   {{/each}}
 </select>

型号

  import DS from 'ember-data';

  export default DS.Model.extend({
  value: DS.attr('string')
  });

Answer 1

在您的模板中，对于选项标签，您还需要提供选择的值，让控制器知道选择的是什么。

这是我根据您正在尝试执行的操作的假设重新创建的工作示例。

在继续之前...请确保通过运行以下 Ember CLI 命令安装 Ember Truth Helpers - https://www.npmjs.com/package/ember-truth-helpers：

ember install ember-truth-helpers

您的路线（在这种情况下提供模型）将如下所示：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return [{'name': 'a', 'valuation': 100},
            {'name': 'b', 'valuation': 200},
            {'name': 'c', 'valuation': 150},
            {'name': 'd', 'valuation': 250}
          ];
  }
});

你的控制器看起来像这样：

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['company'],
  company: null,
  actions: {
    selectCompany: function(company){
        alert(company);
        this.set('company', company);
      }
}});

您的模板如下所示：

<select onchange={{action "selectCompany" value="target.value"}}>
  {{#each model as |companyChoice|}}
    <option value={{companyChoice.name}} selected={{eq company companyChoice.name}}>{{companyChoice.name}}</option>
  {{/each}}
</select>

希望对您有所帮助。

Ember select 和查询参数。变得不确定

Ember select and query parameters. Getting undefined

select

undefined

ember.js