EmberのアクションヘルパーをDOMに追加する方法

Question

最初に、私はEmberからちょうど始まったことをお知らせしたいので、同じ結果を達成するより良い方法がある場合は、それ。

私は「select-room」と呼ばれるコンポーネントを持っています。それはthisサイトの "Quartos"、 "Adultos"、 "Crianças"フィールドとして機能するはずです。

"Quartos"フィールドが変更されたときにフォーム上のフィールドをさらに選択または削除すると、 "Crianças"の値が変更されたときと同じことが起こります。私はDOM操作を使ってこのような振る舞いを達成することができましたが、このhtml + = ''のような選択フィールドを追加すると、アクションヘルパーは機能しません。完全なコードへ

リンクはGithubの中で、このレポである：https://github.com/darwinboaventura/embercvc

は、この問題を解決するための最良の方法には何ですか？

Answer 1

ハンドルバーの構文を使用してDOM要素をレンダリングするには、コンポーネントにデータセットを使用します。

{{#if items}} 
    <select onchange={{action ..}}> 
    {{#each items as |item|}} 
     <option value={{item.value}}>{{item.label}}</option> 
    {{/each}} 
    </select> 
{{/if}} 

は、この例を参照してください：https://guides.emberjs.com/v2.14.0/templates/displaying-a-list-of-items/

全体的にあなたは物事がエンバーでどのように機能するかをより良く理解しているので、あなたは、チュートリアルを通過する必要があります。ここから始めてください：https://guides.emberjs.com/v2.14.0/tutorial/ember-cli/

Answer 2

@knownasilya私はすでにチュートリアルを終えていますが、私の問題を解決するものは見つかりませんでした。あなたのコード例は私の問題にもあてはまらない。

私が必要とするのは、選択した「部屋」の値が変更されたときに、その値を「部屋」プロパティに保存することです。すぐ後、それはループします（インデックス< =部屋中）とループの間に私は各反復のインデックスにアクセスすることができます。

私が知る限り、forループに相当するEmberヘルパーはありません。私はこのリンク（Create a for loop that will iterate a certain number of times in Ember-CLI）の例を実装することができましたが、ループ内のインデックスにアクセスすることはできません。

Answer 3

私はここに、私の解決策の問題を解決しました：

アプリ/コンポーネント/選択-rooms.js：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    name: null, 
    quantityRooms: 1, 
    rooms: '', 
    init() { 
     this._super(...arguments); 
     this.set('rooms', [1]); 
    }, 
    actions: { 
     changeQuantityRooms(value) { 
      this.set('quantityRooms', value); 
      this.set('rooms', []); 

      for (var i = 0; i < this.get('quantityRooms'); i++) { 
       this.get('rooms').pushObject(i); 
      }; 
     }, 
     changeQuantityChildren(value) { 
      this.set("quantity" + value.name, value.value); 
      this.set(value.name, []); 

      for (var i = 0; i < this.get("quantity" + value.name); i++) { 
       this.get(value.name).pushObject(i); 
      } 
     } 
    } 
}); 

アプリ/テンプレート/コンポーネント/選択-rooms.hbsを：

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label>Quartos</label> 

      <select name={{name}} onchange={{action "changeQuantityRooms" value="target.value"}} class="form-control"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 
     </div> 
    </div> 

    <div class="col-sm-6"> 
     {{#if rooms}} 
      {{#each rooms as |room index|}} 
       <div class="row"> 
        <div class="col-sm-6 form-group"> 
         <label> 
          Adultos <small>+18</small> 
         </label> 

         <select name={{concat name index "-adults"}} class="form-control"> 
          <option value="1">1</option> 
          <option value="2">2</option> 
          <option value="3">3</option> 
          <option value="4">4</option> 
          <option value="5">5</option> 
          <option value="6">6</option> 
          <option value="7">7</option> 
          <option value="8">8</option> 
          <option value="9">9</option> 
         </select> 
        </div> 

        <div class="col-sm-6 form-group"> 
         <label> 
          Crianças <small>até 17 anos</small> 
         </label> 

         <select name={{concat name index "-children"}} onchange={{action "changeQuantityChildren" value="target"}} class="form-control"> 
          <option value="0">0</option> 
          <option value="1">1</option> 
          <option value="2">2</option> 
          <option value="3">3</option> 
          <option value="4">4</option> 
          <option value="5">5</option> 
          <option value="6">6</option> 
          <option value="7">7</option> 
          <option value="8">8</option> 
          <option value="9">9</option> 
         </select> 
        </div> 

        <div class="col-xs-12"> 
         {{#if (get this (concat "quantity" name index "-children"))}} 
          <div class="row"> 
           <div class="col-xs-12"> 
            <label>Idade das crianças: </label> 
           </div> 
          </div> 

          <div class="row"> 
           {{#each (get this (concat name index "-children")) as | child i |}} 
            <div class="col-sm-4 form-group">           
             <select name={{concat name index "-children-age-" i}} class="form-control"> 
              <option value="0">0</option> 
              <option value="1">1</option> 
              <option value="2">2</option> 
              <option value="3">3</option> 
              <option value="4">4</option> 
              <option value="5">5</option> 
              <option value="6">6</option> 
              <option value="7">7</option> 
              <option value="8">8</option> 
              <option value="9">9</option> 
              <option value="10">10</option> 
              <option value="11">11</option> 
              <option value="12">12</option> 
              <option value="13">13</option> 
              <option value="14">14</option> 
              <option value="15">15</option> 
              <option value="16">16</option> 
              <option value="17">17</option> 
             </select>          
            </div> 
           {{/each}} 
          </div> 
         {{/if}} 
        </div> 
       </div> 
      {{/each}} 
     {{/if}} 
    </div> 
</div>