在 Knockout Foreach 中弹出引导模型

Posted 2023-03-27

【中文标题】在 Knockout Foreach 中弹出引导模型

【英文标题】：Popping up a bootstrap model in a Knockout Foreach

【发布时间】：2018-04-28 17:04:15

【问题描述】：

我试图在使用 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/

【参考方案1】：

您需要在showDialog 前面加上$parent 关键字，以提供正确的binding context

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

在foreach 绑定中，剔除在每个AttributeKey 对象中查找showDialog，而不是AttributeViewModel 实例。您也可以在它前面加上 $root，因为在这种情况下，$parent 和 $root 指的是 AttributeViewModel 实例。

Updated fiddle

【讨论】：

这太完美了！

【参考方案2】：

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

Uncaught ReferenceError: showDialog is not defined

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

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

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

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

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