ember firebase pass models to action handler

Question

У меня есть модели данных ember, подключенные к базе, персонажам и заклинаниям. Я могу создавать новые модели и сохранять их в 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}) 
}); 

Spells модель также упрощено для данного примера:

//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>