Javascript 通过本机选择元素更新belongsTo关系

我一直在尝试将’s Ember Conf 2016 talk的详细信息合并到一个项目中，它正在处理以下示例中的简单属性名称是字符串数组，model.name是attr字符串：

模板：

并修改模板以调用此：

<select onchange={{action "title" value="target.value"}}>
  {{#each titles as |title|}}
    <option value={{title.id}} selected={{eq title.id model.title.id}}>
      {{title.description}}
    </option>
  {{/each}}
</select>

然而，我需要为我想要以这种方式更新的每个关系创建一个函数

---

有没有一种方法可以直接从模板设置belongsTo关系，而无需调用中间函数或求助于附加组件？如果没有，那么是否有一种干燥的方法来解决这个问题？

经过几次尝试，并找到一个动作需要有多个参数，当其中一个参数通过value=属性设置时，这里是干燥的er解决方案：

组成部分：

模板：

---

但是，我仍在寻找一种不涉及在组件中定义操作的解决方案。

不幸的是，在我们拥有可路由组件之前，如果不从组件发送操作，就无法做到这一点。幸运的是，我们有ember route action helper来帮助我们，这可以作为可路由组件的垫片。-我知道您说过希望避免使用附加组件，但就我所知，这是目前唯一不涉及在组件中定义操作的解决方案。此外，它通常是一个非常有用的附加组件。我将它用于这个用例和其他用例。好处：当可路由组件特性落地时，您实际上不必进行任何重构。总之，我就是这样解决这个问题的：

您可以指定管线上的操作，并使用Mixin进行干燥。代替Mixin，您也可以只扩展路由并从中继承，或者重新打开路由。我反对重新开放这条路线，因为你们不太可能在每条路线上都需要这样做。避免肿胀

这个Mixin假设您的模型属性和它引用的belongsTo模型将始终具有相同的名称，因此只使用一个变量：property。如果不是这样，则需要添加另一个参数并将其传递给setBelongsTo，并指定用于set和peek记录的参数

在ember cli:2.13.2上测试并运行

选项1：本机选择方法

注意：需要ember route action helper附加组件

//模板/my-route.hbs {{每个标题作为|标题|} {{title.description}} {{/每个}} 选项2：余烬能量选择方法

注意：需要ember route action helper附加组件

如果使用余烬电源选择，则会出现一些细微差异

//模板/my-route.hbs {{电源选择 选项=标题 所选=model.title onchange=操作路由操作“setBelongsTo”模型“title” 作为|头衔| }} {{title.description}} {{/power select} 编辑1：OP使用ember truth helpers附加组件设置所选选项。或者OP为eq创建了自己的帮助器。这里的第一个解决方案也使用此附加组件

import Ember from 'ember';

export default Ember.Controller.extend({
  titles: null,
  init(){
    this.set( "titles", this.store.peekAll( "title" ) );
  }
});

<select onchange={{action (mut model.title) value="target.value"}}>
  {{#each titles as |title|}}
    <option value={{title}} selected={{eq title.id model.title.id}}>
      {{title.description}}
    </option>
  {{/each}}
</select>

actions: {
  title( id ){
    this.set( 'model.title', this.store.peekRecord( "title", id ) );
  }
}

<select onchange={{action "title" value="target.value"}}>
  {{#each titles as |title|}}
    <option value={{title.id}} selected={{eq title.id model.title.id}}>
      {{title.description}}
    </option>
  {{/each}}
</select>

actions: {
  updateValue( attr, model, id ){
    this.set( attr, this.store.peekRecord( model, id ) );
  }
}

<select onchange={{action (action "updateValue" "model.title" "title") value="target.value"}}>
  {{#each titles as |title|}}
    <option value={{title.id}} selected={{eq title.id model.title.id}}>
      {{title.description}}
    </option>
  {{/each}}
</select>

// mixins/my-mixin.js

import Ember from 'ember';

export default Ember.Mixin.create({
  actions: {
    setBelongsTo(model, property, value) {
      this.get('controller').get(model).set(property, this.store.peekRecord(property, value));
    }
  }
});

// routes/my-route.js

import Ember from 'ember';
import SetBelongsToMixin from 'myApp/mixins/set-belongs-to';

export default Ember.Route.extend(SetBelongsToMixin, {
  model() {
    return this.get('store')find(...);
  }
});

// mixins/my-mixin.js

import Ember from 'ember';

export default Ember.Mixin.create({
  actions: {
    setBelongsTo(model, property, value) {
      this.get('controller').get(model).set(property, value);
    }
  }
});

// routes/my-route.js

import Ember from 'ember';
import SetBelongsToMixin from 'myApp/mixins/set-belongs-to';

export default Ember.Route.extend(SetBelongsToMixin, {
  model() {
    return this.get('store')find(...);
  }
});