【发布时间】：2019-11-07 23:35:28
【问题描述】：
概述
我在 Ember.js 3.8 项目中使用 ember-power-select - 它一半有效，一半无效！
为了使问题更具可读性，我将所有代码放在问题的底部。
情况
选择配置为从 API 端点获取数据并为用户提供一组可能的选项以供选择。
所涉及的路线 (routes/guest/new-using-ember-power-select.js) 对模型 (models/guest.js) 执行 createRecord，然后理想情况下对这两个表单进行更改元素（templates/guests/new-using-ember-power-select.js 和 templates/components/guest-form-ember-power-select.hbs）反映回数据存储中的该记录。
问题
这适用于文本输入，但我无法使其适用于 ember-power-select。
在当前配置（如下所示）中，用户可以：
- 搜索要选择的选项；
- 选择一个选项，然后；
- 将该选择反映回数据存储中的
guest实例。 但是所做的选择并未反映在用户界面中 - 似乎没有做出任何选择。
我非常感谢有人指出我在这里做错了什么。我觉得这可能是一件很小的事情，但我确实想到我必须通过组件中的属性来管理选择的状态，并且只有在提交表单时才更新底层数据存储......我会不想这样做，但我很想知道这是否被认为是最好的主意。
谢谢
编辑 1：我忘了说我试图改变 ember-power-select 的 onchange 属性，而不是看起来像这样
onchange=(action "nationalityChangeAction")
...看起来像这样...
onchange=(action (mut item.nationality))
效果如下：
- 所选值在表单中可见（正如您通常所期望的，但与我目前的努力不同）但是
- 放入基础数据存储记录的值不是两个字符的国家/地区代码，而是返回 API 调用的数组实例，一个具有两个属性
{"name":"New Zealand","alpha2Code":"NZ"}的对象。
型号
//app/models/guest.js
import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';
const Validations = buildValidations({
name: [
validator('presence', true),
],
nationality: [
validator('presence', true),
],
});
export default DS.Model.extend( Validations, {
name: DS.attr('string'),
nationality: DS.attr('string')
});
路线
//app/routes/guest/new-using-ember-power-select.js
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.createRecord('guest', {
name: "",
nationality: ""
});
},
actions: {
updateNationality(slctnValue) {
this.controller.model.set('nationality' , slctnValue);
},
}
});
模板
//app/templates/guests/new-using-ember-power-select.js
<h2>Guest: Add New</h2>
<div class="well well-sm">
Demonstration of 'ember-power-select'
</div>
{{guest-form-ember-power-select
item=model
changeNationalityHandler="updateNationality"
updateRecordHandler="updateRecord"
cancelHandler="cancelAndExit"
}}
{{outlet}}
组件模板
//app/templates/components/guest-form-ember-power-select.hbs
<div class="form-vertical">
{{!-- Guest Name --}}
<div class="form-group">
<label class="control-label">Name</label>
<div class="">
{{ input type="text"
value=item.name
class="form-control"
placeholder="The name of the Guest"
focus-out=(action (mut this.errMsgDspCntrl.nameError) true)
}}
</div>
{{#if this.errMsgDspCntrl.nameError}}
<div class="text-danger">
{{v-get item 'name' 'message'}}
</div>
{{/if}}
</div>
<div class="form-group">
<label class="control-label">Countries (using power-select)</label>
<div class="">
{{#power-select
searchPlaceholder="Text to provide user info about what they can search on"
search=(action "searchCountries")
selected=item.nationality
onchange=(action (mut item.nationality))
as |countries|
}}
{{countries.name}}
{{/power-select}}
</div>
{{#if this.errMsgDspCntrl.nationalityError}}
<div class="text-danger">
{{v-get item 'nationality' 'message'}}
</div>
{{/if}}
</div>
{{!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--}}
{{!-- Buttons --}}
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default" {{action "buttonSaveClicked" item}}>{{buttonLabel}}</button>
<button type="button" class="btn btn-default" {{action "buttonCancelClicked" item}} >Cancel</button>
</div>
</div>
</div>
{{yield}}
组件
//app/components/guest-form-ember-power-select.js
import Component from '@ember/component';
export default Component.extend({
actions:{
searchCountries(term) {
//Response to :
//
//https://restcountries.eu/rest/v2/name/z?fields=name;alpha2Code
//
//
//looks like this
// [
// ...
// {"name":"New Zealand","alpha2Code":"NZ"}
// ...
// ]
//
let url = `https://restcountries.eu/rest/v2/name/${term}?fields=name;alpha2Code`
let dbg = fetch(url)
.then(function(response) {
return response.json();
});
return dbg;
},
nationalityChangeAction(slctn){
this.sendAction('changeNationalityHandler', slctn.alpha2Code);
},
}
});
【问题讨论】：
标签： javascript ember.js ember-power-select