emberx-select value无法与model绑定的解决方案

没错，x-select又出问题了。不得不说ember在版本之间的兼容真的差……

问题是这样，用x-select写了个选择框，代码是这样的：

{{#x-select value=model.sighting.cryptid
			class="form-control" as |xs|}}
	{{#xs.option disabled=true}}Select Cryptid{{/xs.option}}
	{{#each model.cryptids as |cryptid|}}
		{{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
	{{/each}}
{{/x-select}}

看起来没什么问题，但是往服务器上POST的时候500了。一开始以为是服务器崩了，后来查看发送的数据，发现全是null和undefined。也就是说，x-select的value并没有和model绑定。

查了一堆资料，尤其是看到x-select的issue之后，发现好像是x-select自己的问题……现在只能通过迂回手段，通过在controller层设置action，来和model交互了。

也就是说，换个写法之后就能解决问题：

在模板里增加action：

{{#x-select on-change=(action 'didMakeCryptidSelection')
			class="form-control" as |xs|}}
	{{#xs.option disabled=true}}Select Cryptid{{/xs.option}}
	{{#each model.cryptids as |cryptid|}}
		{{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
	{{/each}}
{{/x-select}}

同时在controller里把对应的action加上：

actions: {
    // ...
    didMakeCryptidSelection(value) {
      this.get('sighting').set('cryptid', value);
    }
    // ...
}

有一点可能需要补充一下，如果同时加上value和action会怎么样？结果是无论怎么选择，选择框里的数据都不变，就像卡住了一样；但数据实际上是在不断变化的。我觉得它可能是直接截取了初始化时value的快照（然后就固定了），并不是所谓的双向绑定。

如果还是不明白……可以看看我写的。

最后，永远不要轻易相信ember inspector。

参考资料

1. Creating new Sighting 500 error
2. Install EmberX-Select p.437
3. Issues with promise values?