Ember.jsのブートストラップでチェックを複製するチェックボックスで問題が発生する

Question

チェックボックスをクリックすると、たとえば月曜日にChecboxは検証されますが、各要素の月曜日はすべて検証されます。

私はテンプレートを表示しますが、それはより明確になります。

月曜日に私をクリックすると、チェックが両方のために検証され、そしてJS内の値が両方のために検証されます。

ページを定義するHandlebars.jsテンプレートは次のとおりです。このファイルはshedule-timeframe.hbsです。

{{#if timeframe}} 
 
    {{log "monday " timeframe.enabledOnMonday}} 
 
    {{log "start " timeframe.startTime}} 
 
    <div class="col-lg-12"> 
 
     <!--Be careful, it's monday, friday, tuesday, saturday, wednesday, sunday, thursday --> 
 
     <div class="col-lg-3"> 
 
      {{form.element controlType='checkbox' label=(t 'schedule.monday') 
 
          property="enabledOnMonday" value=timeframe.enabledOnMonday}} 
 
      {{form.element controlType='checkbox' label=(t 'schedule.friday') 
 
          property="enabledOnFriday" value=timeframe.enabledOnFriday}} 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      {{form.element controlType='checkbox' label=(t 'schedule.tuesday') 
 
          property="enabledOnTuesday" value=timeframe.enabledOnTuesday}} 
 
      {{form.element controlType='checkbox' label=(t 'schedule.saturday') 
 
          property="enabledOnSaturday" value=timeframe.enabledOnSaturday}} 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      {{form.element controlType='checkbox' label=(t 'schedule.wednesday') 
 
          property="enabledOnWednesday" value=timeframe.enabledOnWednesday}} 
 
      {{form.element controlType='checkbox' label=(t 'schedule.sunday') 
 
          property="enabledOnSunday" value=timeframe.enabledOnSunday}} 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      {{form.element controlType='checkbox' label=(t 'schedule.thursday') 
 
          property="enabledOnThursday" value=timeframe.enabledOnThursday}} 
 
     </div> 
 
    </div> 
 
    <br> <br> <br> <br> <br> 
 
    <div class="col-lg-4"> 
 
     {{#form.element label=(t 'schedule.start_time')}} 
 
      {{input type='text' placeholder='13:37'value=(mut timeframe.startTime) class='form-control'}} 
 
     {{/form.element}} 
 

 
    </div> 
 
    <div class="col-lg-4"> 
 
     {{#form.element label=(t 'schedule.end_time')}} 
 
      {{input type='text' placeholder='18:42'value=(mut timeframe.endTime) class='form-control'}} 
 
     {{/form.element}} 
 
    </div> 
 
{{/if}}

そしてここで、私はこのテンプレートを呼んでいるこの。このファイルはshedule-form.jsです。私はの一つに私がクリックしたときに、重複checboxの問題を持っている：あなたはライン20

{{#bs-form formLayout="horizontal" model=schedule as |form|}} 
 
    
 
    <legend>{{t 'timeframes'}}</legend> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="pull-left col-md-1"> 
 
       {{bs-button defaultText=(t 'add') type='success' onClick=(action    'addTimeframe')}} 
 
      </div> 
 
      <div class="col-md-1"> 
 
       {{bs-button defaultText=(t 'submit') type="primary" onClick=action  buttonType="submit"}} 
 
      </div> 
 
     </div> 
 
     <br> <br> 
 
     <div class="row"> 
 
      {{#each schedule.timeframes as |tf|}} 
 
       {{log "tf " tf}} 
 
       <div class="panel panel-default"> 
 
        <br> 
 
        <div class="row"> 
 
         {{schedule-timeframe form=form timeframe=tf model=tf}} 
 
        </div> 
 
        <div class="col-md-2"> 
 
         {{bs-button defaultText=(t 'remove_selected') type='danger' 
 
            onClick=(action 'removeTimeframe')}} 
 
        </div> 
 
        <br> <br> 
 
       </div> 
 
      {{/each}} 
 
     </div> 
 
    </div> 
 
{{/bs-form}}

tldrで私はスケジュールtimeframe.hbsファイルを呼び出すことがわかりますそれらは同じ値であるが異なる値である。[timeframe]。

Answer 1

私は自分自身を作成し​​て解決します変更する！これのonChangeで

{{form.element controlType='checkbox' label=(t 'schedule.monday') 
 
          value=(mut timeframe.enabledOnMonday) 
 
          onChange=(action (mut timeframe.enabledOnMonday))}}

、私は、各タイムフレームの値を設定することができます。