Knockout JS - 模态表单不能很好地与 Bootstrap 配合使用答案

【问题标题】：Knockout JS - Modal forms not playing nice with BootstrapKnockout JS - 模态表单不能很好地与 Bootstrap 配合使用
【发布时间】：2015-12-13 08:02:42
【问题描述】：

已经工作了大约 2 周，以使 CRUD 系统能够与淘汰赛一起工作，并且正在慢慢实现。每次我尝试添加按钮时都会遇到问题。

目前我最大的问题是我的添加按钮应该清除我的新闻中的所有值并给我一个空白表格来填写。目前我使用引导程序将它加载到模态表单中。在我的网站上，屏幕逐渐消失，好像要向您显示模态 DIV，但没有任何反应。

http://jsfiddle.net/rqwku4kb/3/

self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
     self.currentIncident(null);
 ;
    };

有人有什么想法吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap knockout.js

【解决方案1】：

使用 Knockout 来控制您的模式，就像其他一切一样。如果你在视图模型周围摆弄 DOM，事情就会出错。

Twitter bootstrap 3 Modal with knockout

【讨论】：

感谢您的信息，我确实注意到删除 Data-bind="with: currentIncident" 模式开始工作，但与 Knockout 同步的时间更长。因此，根据您的评论，这确实是淘汰赛。我查看了你给我的链接，但我只是不明白如何在我的 jsfiddle jsfiddle.net/rqwku4kb/6 上实现它，这对我来说没有任何意义。
尚不清楚您将模态元素绑定到什么。要使用模式绑定处理程序，基本上通过将 showDialog 设置为 false 或 true 来替换所有对隐藏和显示的调用。我在这里做到了：jsfiddle.net/rqwku4kb/7 但绑定问题使事情无法正常运行。
谢谢罗伊，我仍然对一件棘手的事情感到困惑。在您的示例中，模态似乎正在工作。对我的代码进行了一些调整，但现在我的编辑代码不会打开模式。我想要完成的是，当我单击“新事件”按钮时，它会给我加载一个空白表格。当我单击行的编辑按钮时，它将打开模式并显示所选事件的数据。 jsfiddle.net/rqwku4kb/10
@DanielEllison 您需要使用$parent.showDialog(true)，其中之一。这带来了模态覆盖，但不是模态本身。这可能是一个CSS问题。我建议您从最简单的模态使用示例从头开始，然后开始向其中添加内容。
我取得了一些进展jsfiddle.net/rqwku4kb/11。在多次重新阅读您的 cmets 后，它终于陷入了困境。我使用您的示例让模态为我的编辑按钮工作。但是，当我单击新事件时，我的模式会消失，就好像它试图打开我的表单但从不显示我的表单一样。在进一步分析之后，我发现问题似乎不在于我的模式，而是在于这一行 self.currentIncident(null);我需要找出模态更喜欢的另一种方法。

【解决方案2】：

单击背景时模态框将关闭，因此您需要使用以下两种方式之一来抑制它。使用以下引导属性防止由于背景点击而关闭模式：

通过javascript：

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

HTML：

<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">

或者抑制背景点击事件。当您单击新按钮时，单击事件会为 button 触发，然后通过 DOM 冒泡/向上传播，从而触发背景单击，进而再次关闭对话框。

所以要么抑制处理程序中的传播：

self.AddNewIncident = function(data, ev) {
    var id = this.ID;
    $('#myModal').modal('show');
    self.currentIncident(null);
    ev.stopPropagation();
};

或在点击绑定中，这样淘汰赛将为您执行此操作：

<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>

【讨论】：

不幸的是，这并没有解决它。我把它放在 jsfiddle 中，而不是自动关闭它只是停留在褪色的屏幕上，好像它试图打开我的对话框但什么也不做。