Question

我有使用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>

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

1 个答案: