Question

样本1 - 功能损坏

在此Durandal 2.0.1视图中，点击处理程序无法启动。

<div class="messageBox">
  <form class="form-inline" data-bind="submit: commit">
    <div class="modal-header">
      <h3>Upload item</h3>
    </div>
    <div class="modal-body">
      <section>
        <fieldset class="main">
          ... (lots of data bound fields) ...
       </fieldset>
      </section>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary button" data-bind="click: commit">OK</button>
      <button class="btn button" data-bind="click: rollback">Cancel</button>
     </div>
  </form>
</div>

相反，表单提交处理程序触发，不指示单击了哪个按钮。

样品2 - 视觉上破碎

在此示例中，唯一的区别是按钮位于body div而不是footer div。在这种情况下，按钮点击处理程序执行触发，但按钮未正确定位且UI看起来很糟糕。

<div class="messageBox">
  <form class="form-inline" data-bind="submit: commit">
    <div class="modal-header">
      <h3>Upload item</h3>
    </div>
    <div class="modal-body">
      <section>
        <fieldset class="main">
          ... (lots of data bound fields) ...
          <button class="btn btn-primary button" data-bind="click: commit">OK</button>
          <button class="btn button" data-bind="click: rollback">Cancel</button>
        </fieldset>
      </section>
    </div>
    <div class="modal-footer">
    </div>
  </form>
</div>

在Durandal网站上的对话框示例中，有一个＆＃34; ok＆＃34;绑定到表单提交和按钮单击的处理程序，如此处的示例视图中所示。我花了很长时间才发现按钮点击事件没有触发，而是表单提交事件。

我需要将按钮放在页脚中以进行正确的布局，但我需要点击事件才能触发，以便我知道用户是单击确定还是取消。我可以显式绑定onclick =＆＃34; commit＆＃34;和onclick =＆＃34;回滚＆＃34;对于这两个按钮，但是那个......真是太烂了。

什么时候他们在页脚中绑定了绑定，我该怎么办呢？

Answer 1

从评论回复到原帖：

通常情况下，click绑定中的submit绑定应正确触发，如此示例所示，基于发布的代码：http://jsfiddle.net/SeKkc/

如果你有一个流氓ko评论或其他一些改变绑定范围的标记，可能在标记为：

的部分

...（大量数据绑定字段）......

这可能会影响您对click: commit和click: rollback的两次绑定，因为它可能无法找到这些绑定。换句话说，commit绑定可以访问您尝试绑定的submit: commit函数，但中间的某些内容会导致click: commit绑定无法访问它。

如果click绑定找不到commit和rollback，那么点击这些按钮就会回退到submit绑定，这恰好绑定到commit 1}}。此处显示了此回退行为，单击按钮将触发commit函数：http://jsfiddle.net/SeKkc/2/

此行为也可能是由绑定到模型上不存在的属性引起的。按钮位于页面的末尾，最后处理。遇到无效绑定时，预处理停止;这是在处理按钮之前，因此没有绑定处理程序。这就是为什么将它们移到身体的开始会导致它们开始工作。

Knockout点击模态对话框中的绑定奇数

样本1 - 功能损坏

样品2 - 视觉上破碎

1 个答案: