模态对话框中的淘汰赛点击绑定奇怪答案

【问题标题】：Knockout click binding oddness in modal dialog模态对话框中的淘汰赛点击绑定奇怪
【发布时间】：2014-04-16 10:26:06
【问题描述】：

示例 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 - 视觉破碎

在此示例中，唯一的区别是按钮位于正文 div 而不是页脚 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 网站上的对话框示例中，有一个“ok”处理程序，它绑定到表单提交和按钮单击，如示例视图中所示。我花了很长时间才弄清楚这不是按钮单击事件触发，而是表单提交事件。

我需要将按钮放在页脚中以进行正确的布局，但我需要触发单击事件，以便我知道用户单击的是确定还是取消。我可以为这两个按钮显式绑定 onclick="commit" 和 onclick="rollback" ，但这……太难了。

当它们在页脚中时，是什么弄脏了绑定，我该怎么办？

【问题讨论】：

我试图在小提琴中重现这个，但它似乎工作正常：jsfiddle.net/SeKkc - 也许你可以打破这个休息，然后这会导致你的问题？你需要提交绑定，你可以自己使用点击绑定吗？
我试过你的小提琴，挠了挠头，删除了表单提交，没有改变更多的挠头。注释掉“大量输入”... OK/Cancel 开始工作。取消注释输入... 确定/取消继续工作。我想我会在黑暗的角落里哭泣。
也许您在“大量输入”部分中有一些 ko cmets 或类似内容，这意味着“提交”和“回滚”的绑定正试图触发其中一个数据绑定项，而不是父视图模型？看这个例子：jsfiddle.net/SeKkc/2 - 这里找不到“commit2”和“rollback2”绑定，所以它回退到“submit”绑定？如果是这样，您可以尝试可能对您有用的“$parent.commit”，这完全取决于您绑定到的结构。
YES 就在刚刚过去的那一刻发现了它。这是罪魁祸首：当我取消注释时，实际的注释变成了纯文本并停止杀死它。将其发布为答案，积分归您所有，因为您已正确锁定它。

标签： knockout.js durandal

【解决方案1】：

cmets 对原帖的回答：

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

如果你有一个 rogue ko 注释，或者其他改变绑定范围的标记，可能在标记的部分：

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

这可能会干扰您对click: commit 和click: rollback 的两个绑定，因为它可能无法找到这些绑定。换句话说，您尝试绑定的 commit 函数可以通过 submit: commit 绑定访问，但中间的某些东西会导致 click: commit 绑定无法访问它。

如果click 绑定无法找到commit 和rollback，则单击这些按钮将退回到submit 绑定，该绑定恰好绑定到commit。此处显示了此后备行为，单击按钮将触发 commit 函数：http://jsfiddle.net/SeKkc/2/

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

【讨论】：