我刚刚继承了一个使用上述三个框架的项目。这是我的模板的片段:
<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>
按钮位置的不同之处在于 我假设这是 我是Backbone / Handlebars / Bootstrap组合的新手,所以我希望我能够很好地解释自己。form
和{{with}}
块之外。 'click #next': 'onNext'
click
事件处理程序绑定?它似乎受id
约束,我理解这意味着按钮所在的位置无关紧要。除非......其中一个bootstrap类具有特定含义,并作为表单提交?
答案 0 :(得分:0)
按钮位于表单元素内部,快速猜测是他们正在提交表单!
按如下方式添加按钮类型:
<button type='button'>
参考: