问题复选框与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引导程序复制

回答

相关问题