ember firebase 将模型传递给动作处理程序

Question

我的 ember 数据模型与 firebase、字符和咒语挂钩。我可以创建新模型并将它们保存到 firebase。现在我想为角色添加咒语。我定义了这个角色有很多咒语：

export default DS.Model.extend({
  chClass: DS.attr(),
  chName: DS.attr(),
  chImage: DS.attr(), 
  chSpells: DS.hasMany('spell', {async: true}),
});

在我的 hbs 中，我在 <select> 元素中列出了咒语，还有输入字段和添加按钮。

Add new character <br>
name {{input value=mchName }}<br>
class {{input value=mchClass }}<br>
image {{input value=mchImage }}<br>

<br>
Choose Spells:<br>
<select name="spellslist" multiple>
{{#each spells as |spell index|}}
 <option value="{{index}}">{{spell.spName}}</option>
{{/each}}
</select>

<button {{action 'addChar' spells}}>add</button><br>

因此，当用户输入角色名称、等级并选择一些咒语时，我想在添加按钮上调用 addChar 操作函数并传递此数据。

export default Ember.Controller.extend({
mchName:'',
mchClass:'',
mchImage:'',
store: Ember.inject.service(),

actions: {
addChar: function(spells) {
  var newChar = this.store.createRecord('character');
  newChar.set("chName", this.mchName);
  newChar.set("chClass", this.mchClass);
  newChar.set("chImage", this.mchImage);
  newChar.get("chSpells").addObject(?????? how to get spell here ?????);

  newChar.save();

我知道如何从输入中传递字符串，但我不知道如何将选定的法术传递给这个函数，这让我很生气。

Answer 1

我假设您（作为管理员）将填充拼写表。现在......假设一个角色可以有许多咒语并且一个咒语可以有很多字符，这就是如何解决这个问题（注意我正在使用控制器......理想情况下，您应该在组件中执行此操作）：

人物模型简化：

//app/models/character.js
import DS from 'ember-data';

export default DS.Model.extend({
  chName: DS.attr(),
  chSpells: DS.hasMany('spell', {async: true})
});

此示例还简化了法术模型：

//app/models/spell.js
import DS from 'ember-data';

export default DS.Model.extend({
  spName: DS.attr(),
  spellChar: DS.hasMany('character', {async: true})
});

我们需要一个用于多行选择的包含助手。查看this article了解详情：

//app/helpers/include.js
 import Ember from 'ember';
  export function include(params/*, hash*/) {
  const [items, value] = params;
  return items.indexOf(value) > -1;
   } 
  export default Ember.Helper.helper(include);

申请途径如下：

app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    var spells = this.store.findAll('spell');
    return spells;
  }
});

和应用程序控制器：

//app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
  selectedSpellIds: [],
  actions: {
    selectSpell(event){
      const selectedSpellIds = Ember.$(event.target).val();
      this.set('selectedSpellIds', selectedSpellIds || []);
    },
    addChar: function(){
      var charName = this.get('mchName');
      var _this = this;
      var spells = this.get('selectedSpellIds');
      var spellObjArray = spells.map(function(spellId){
        return _this.store.peekRecord('spell', spellId );
      });
      var charToSave = this.store.createRecord('character', {
          chName: charName,
          chSpells: spellObjArray
      });
      charToSave.save();
    },
  }
});

以及申请模板：

//app/templates/application.hbs
Add new character <br>
name {{input value=mchName }}<br>

<br>
Choose Spells:<br>
<select multiple onchange={{action "selectSpell"}}>
{{#each model as |spell|}}
 <option value={{spell.id}} selected={{include selectedSpellIds spell.id}}>{{spell.spName}}</option>
{{/each}}
</select>

<button {{action 'addChar'}}>add</button><br>