Question

我尝试选择一个选项，一旦选中，就获取对象的值并使用该值更改网址。

现在，我在网址中未定义：

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>

希望这有帮助。

灰烬选择和查询参数。未定义

1 个答案: