代码之家 › 专栏 › 技术社区 › maje

出现复选框问题,该复选框与Ember.js的bootstrap复选框重复

ember-cli handlebars.js ember.js twitter-bootstrap

maje · 技术社区 · 7 年前

我将向您展示模板,您可以更清楚地看到它。

这是车把。定义页面的js模板。此文件是 时间表.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}}

在这里,我称之为模板。此文件是 附表-form.js 在第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有一个问题,当我单击其中一个时,它会重复,值相同,但在不同的位置 [时间表]

1 回复 | 直到 7 年前

maje 7 年前

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

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

通过这个onChange,我可以设置每个时间段的值。