与 bootstrap 重复检查的复选框问题 Ember.js

Question

当我点击一个复选框时，例如在星期一，复选框被验证，但所有其他星期一，每个元素都被验证。

我给你看模板，你会更清楚。

当我点击星期一时，检查对两者都有效，并且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。你可以看到我在第 20 行调用文件 schedule-timeframe.hbs.

{{#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].

Answer 1

所以我通过创建自己的 onChange 来解决它！

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

有了这个onChange，我可以设置每个时间段的值。

与 bootstrap 重复检查的复选框问题 Ember.js

Issue with the checkbox that duplicate the check with bootstrap for Ember.js

twitter-bootstrap

ember.js

handlebars.js

ember-cli