1

Firebase、キャラクター、呪文に引っ掛けられた 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();

入力から文字列を渡す方法は知っていますが、選択した呪文をこの関数に渡す方法がわかりません。

4

1 に答える 1

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})
});

複数行選択用のインクルード ヘルパーが必要です。詳細については、次の記事を参照してください。

//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>
于 2015-12-20T09:55:03.413 に答える