Question

我试图在使用Knockout时向用户显示模态，似乎无论何时从foreach中调用它，模态都不起作用，或者在硬编码链接的情况下，内容打开新页面而不是弹出模态。

看看下面的小提琴，第32行的按钮看起来忽略了点击，而第37行的按钮按原样运行

<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal:showDialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">title</h4>

      </div>
      <div class="modal-body">
        body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-xs" data-bind="click : submit">Close</button>
      </div>
    </div>
  </div>
</div>
<table>

  <thead>
  </thead>
  <tbody data-bind="foreach: SearchOptions" class="table">
    <tr class="gridRowSelect">

      <td>
        <span data-bind="text: id"></span>
      </td>
      <td>
        <span data-bind="text: text"></span>
      </td>
      <td>
        <button data-bind="click: function(){showDialog(true)}">Show</button>
      </td>
    </tr>
  </tbody>
</table>
<button data-bind="click: function(){showDialog(true)}">Show</button>

https://jsfiddle.net/slipmatt/ckuqrrnn/2/

Answer 1

您需要在onOpen前加showDialog个关键字，以提供正确的binding context

$parent

在<button data-bind="click: function(){$parent.showDialog(true)}">Show</button>绑定中，knockout在每个foreach对象中查找showDialog而不是AttributeKey实例。您也可以在AttributeViewModel前添加前缀，因为在这种情况下，$root和$parent会引用$root个实例。

Updated fiddle

Answer 2

如果您打开浏览器控制台，则会看到错误：

未捕获的ReferenceError：未定义showDialog

这是因为第一个按钮位于foreach绑定范围内，因此正在寻找showDialog项本身上存在的AttributeKey函数。您需要将其指向父上下文：

<button data-bind="click: function(){$parent.showDialog(true)}">Show</button>

由于父模型也是根模型，您也可以使用它：

<button data-bind="click: function(){$root.showDialog(true)}">Show</button>

这在您有多个嵌套绑定并需要直接返回根模型的情况下非常有用。

在Knockout Foreach中弹出一个bootstrap模型

2 个答案: