Backbone / Handlebars / Bootstrap设置中的按钮单击事件处理

Question

我刚刚继承了一个使用上述三个框架的项目。这是我的模板的片段：

<div class="content-header">
    <div class="content-header-title">move money to</div>
    <div class="content-header-controls">
        <dl>
            <dd>
                <a id="aMoveMoneyCancel">back</a>
            </dd>
        </dl>
    </div>
</div>

<div class="content-edge">
    <ul class="triangle-breadcrumb margin-bottom">
        <li class="active"><a>DETAILS</a></li>
        <li><a>REVIEW</a></li>
        <li><a>DONE</a></li>
    </ul>


    <div class="content-section">
        <div class="content-section-header">
            <div class="section-title">
                move money to...
            </div>
        </div>


        <div class="content-section-body padding">

            <form id="moveMoneyToForm">

                <input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
                value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>

                <div class="accounts">
                    <div class="planted-stop"> </div>
                    <div class="sub-section major from-account">
                        <div class="sub-section-account-header">from account</div>
                        <div class="sub-section-account-body">

                            <div id="fromCarouselContainer" class="from-account">
                                <!--carousel slide generated dynamically-->
                                <!--moveMoneyTo.accountsCarousel.template-->
                            </div>

                        </div>
                    </div>

                    <!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
                    <div id="toAccountContainer" class="to-account">

                        {{#if isIrdPayment}}
                        {{> app_templates_irdPayment.carouselDetail.template}}
                        {{else}}
                        {{> app_templates_moveMoneyTo.toAccount.template}}
                        {{/if}}

                    </div>
                    <div class="planted-stop"> </div>
                    <span class="stretch"></span>
                </div>

                <div class="sub-sections-container">
                    <div class="sub-sections-shield"></div>

                    {{#if isIrdPayment}}
                    {{> app_templates_irdPayment.amountDescription.template}}
                    {{else}}
                    {{#with moveMoneyToPayeeDocument}}
                    <div class="sub-section major">
                        <div class="sub-section-header">AMOUNT</div>
                        <div class="sub-section-body">

                            <input id="amount" name="moveMoneyToPayeeDocument.Amount"
                            type="text" step="0.01"
                            placeholder="Amount" value="{{unformatCurrency Amount}}"
                            class="required number amount-input"/>

                        </div>
                    </div>

                    <div class="sub-section major">
                        <div class="sub-section-header">Description</div>
                        <div class="sub-section-body" id="divDescriptionContainer">
                            {{> app_templates_moveMoneyTo.description.template}}
                        </div>
                    </div>

                    {{/with}}
                    {{/if}}


                    {{#with moveMoneyToPayeeDocument}}
                    <div class="sub-section major">
                        <div class="scheduling">
                            <div class="sub-section-header">SCHEDULING</div>
                            <div class="sub-section-body">
                                <div class="transfer-date">

                                    <div id="divTransferDate"
                                    class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
                                    {{#unless isRecurring}} style="height: auto;" {{/unless}}>
                                    <div>
                                        <label for="date">Transfer date</label>
                                        <input id="date" class="date-input" type="text" placeholder="Date"
                                        min="{{today this}}"
                                        data-date-min="{{today this}}"
                                        value="{{formatDate TransferDate 'input'}}"/>
                                    </div>
                                </div>


                                <div class="input-section last">
                                    <div>
                                        <label class="checkbox">
                                            <input id="recurringTransaction" type="checkbox"
                                            data-target=".move-money-to-recurring-section" data-toggle="collapse"
                                            {{#if isRecurring}} checked="checked" {{/if}}
                                            > Recurring transaction
                                        </label>
                                    </div>
                                </div>

                                <div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
                                    {{#with ScheduleDetails}}
                                    <div id="recurringSection">
                                        {{> app_templates_moveMoneyTo.scheduling.template }}
                                    </div>
                                    {{/with}}
                                </div>


                            </div>
                        </div>

                    </div>

                    <div class="buttons-container">
                        <button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
                        <button id="cancel" class="btn btn-item btn-dark">BACK</button>
                    </div>

                    {{/with}}
                </div>
            </form>
        </div>
    </div>
</div>

在Chrome中，此功能无法正常运行，仅限Chrome浏览器。由于某种原因，它导航到的URL在中间插入了一大堆查询参数。我假设它填满了路由，因为它进入了它应该呈现的视图，但后来又回来并再次重新呈现此表单！这只是在Chrome中，我无法在FF或IE9中重现它（还没有尝试过其他版本）。

回过修订历史后，我发现这个表格看起来像这样：

<div class="content-header">
    <div class="content-header-title">move money to</div>
    <div class="content-header-controls">
        <dl>
            <dd>
                <a id="aMoveMoneyCancel">back</a>
            </dd>
        </dl>
    </div>
</div>

<div class="content-edge">
    <ul class="triangle-breadcrumb margin-bottom">
        <li class="active"><a>DETAILS</a></li>
        <li><a>REVIEW</a></li>
        <li><a>DONE</a></li>
    </ul>


    <div class="content-section">
        <div class="content-section-header">
            <div class="section-title">
                move money to...
            </div>
        </div>


        <div class="content-section-body padding">

            <form id="moveMoneyToForm">

                <input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
                       value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>

                <div class="accounts">
                    <div class="planted-stop"> </div>
                    <div class="sub-section major from-account">
                        <div class="sub-section-account-header">from account</div>
                        <div class="sub-section-account-body">

                            <div id="fromCarouselContainer" class="from-account">
                                <!--carousel slide generated dynamically-->
                                <!--moveMoneyTo.accountsCarousel.template-->
                            </div>

                        </div>
                    </div>

                    <!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
                    <div id="toAccountContainer" class="to-account">

                        {{#if isIrdPayment}}
                        {{> app_templates_irdPayment.carouselDetail.template}}
                        {{else}}
                        {{> app_templates_moveMoneyTo.toAccount.template}}
                        {{/if}}

                    </div>
                    <div class="planted-stop"> </div>
                    <span class="stretch"></span>
                </div>

                <div class="sub-sections-container">
                    <div class="sub-sections-shield"></div>

                    {{#if isIrdPayment}}
                    {{> app_templates_irdPayment.amountDescription.template}}
                    {{else}}
                    {{#with moveMoneyToPayeeDocument}}
                    <div class="sub-section major">
                        <div class="sub-section-header">AMOUNT</div>
                        <div class="sub-section-body">

                            <input id="amount" name="moveMoneyToPayeeDocument.Amount"
                                   type="text" step="0.01"
                                   placeholder="Amount" value="{{unformatCurrency Amount}}"
                                   class="required number amount-input"/>

                        </div>
                    </div>

                    <div class="sub-section major">
                        <div class="sub-section-header">Description</div>
                        <div class="sub-section-body" id="divDescriptionContainer">
                            {{> app_templates_moveMoneyTo.description.template}}
                        </div>
                    </div>

                    {{/with}}
                    {{/if}}


                    {{#with moveMoneyToPayeeDocument}}
                    <div class="sub-section major">
                        <div class="sub-section-header">SCHEDULING</div>
                        <div class="sub-section-body">
                            <div class="transfer-date">

                                <div id="divTransferDate"
                                     class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
                                {{#unless isRecurring}} style="height: auto;" {{/unless}}>
                                <div>
                                    <label for="date">Transfer date</label>
                                    <input id="date" class="date-input" type="text" placeholder="Date"
                                           min="{{today this}}"
                                           data-date-min="{{today this}}"
                                           value="{{formatDate TransferDate 'input'}}"/>
                                </div>
                            </div>


                            <div class="input-section last">
                                <div>
                                    <label class="checkbox">
                                        <input id="recurringTransaction" type="checkbox"
                                               data-target=".move-money-to-recurring-section" data-toggle="collapse"
                                        {{#if isRecurring}} checked="checked" {{/if}}
                                        > Recurring transaction
                                    </label>
                                </div>
                            </div>

                            <div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
                                {{#with ScheduleDetails}}
                                <div id="recurringSection">
                                    {{> app_templates_moveMoneyTo.scheduling.template }}
                                </div>
                                {{/with}}
                            </div>


                        </div>
                    </div>
                    {{/with}}

                </div>
            </form>
        </div>

        <div class="buttons-container">
            <button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
            <button id="cancel" class="btn btn-item btn-dark">BACK</button>
        </div>
    </div>
</div>

按钮位置的不同之处在于form和{{with}}块之外。

'click #next': 'onNext'

我假设这是click事件处理程序绑定？它似乎受id约束，我理解这意味着按钮所在的位置无关紧要。除非......其中一个bootstrap类具有特定含义，并作为表单提交？

我是Backbone / Handlebars / Bootstrap组合的新手，所以我希望我能够很好地解释自己。

Answer 1

按钮位于表单元素内部，快速猜测是他们正在提交表单！

按如下方式添加按钮类型：

<button type='button'>

参考：

https://stackoverflow.com/a/9315482/566092