問題複選框與Ember.js引導程序複製

當我點擊一個複選框，例如星期一，checbox驗證，但所有其他星期一，每個元素進行驗證。問題複選框與Ember.js引導程序複製

我會告訴你模板，對你來說可以更清楚。

當我點擊週一，檢查驗證兩個，而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。你可以看到，我調用該文件時間表timeframe.hbs在該行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：我與checbox重複的一個問題，當我點擊的一個他們，相同的價值，但在不同的[時間範圍]。

來源

2017-07-28 maje

問題在於你在哪裏定義'schedule.timeframes'？包括該屬性的代碼和初始化'schedule.timeframes' – kumkanillam

這是在第15行定義的：{{#each schedule.timeframes as | tf |}}。當我這樣做時，它會在**時間表**內捕獲所有**時間表**。例如，在這裏，我有兩個對象，每個時間範圍的ID分別爲0和1.但是，我可能沒正確理解你想向我解釋的內容！ – maje

您將「schedule.timeframes」和「schedule」的價值放在哪裏？ - 路線/控制器代碼 – kumkanillam

所以我通過創建我自己的onChange來解決它！

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

有了這個的onChange，我可以設置每個時間範圍的值。

來源

2017-07-31 08:42:06 maje

問題複選框與Ember.js引導程序複製

回答

相關問題