javascript - 可观察数组更改后 knockout 应用绑定(bind)

Question

我有一个表，其中包含从 knockout 可观察数组中获得的项目，用户输入搜索文本，并且巧合填充可观察数组，该表显示在模态上。每个项目都有一个按钮，用于打开另一个具有某些功能的模式(由于不相关而被省略)。如果 observableArray 长度大于 0，则表必须显示项目，否则必须显示一行以指示没有结果可显示。

<tr style="display: none" data-bind="visible: items().length == 0">
    <td class="text-center alert alert-warning" colspan="4"><b>There's no coincidences</b></td>
</tr>

我的 View 模型:

var viewModel = function () {
    self.items= ko.observableArray([]);

    //Modal is already on html, but not visible, to show it I use this
    $('#searchProduct').modal('show');

    //When modal is closed, the table is cleaned, so the items in observableArray are removed
    $('#searchProduct').on('hidden.bs.modal', function () {
        self.items.removeAll();
    });
}

问题是第一次，可见绑定(bind)工作正常，但是当 observableArray 长度发生变化时(当在隐藏时调用removeAll时)，绑定(bind)不会再次应用。我知道是因为绑定(bind)已经应用，所以当 observableArray 更改时，长度会更新，但条件无法再次渲染 html。

如何通过 knockout 解决这个问题？

(我试图非常具体，但如果需要更多信息，我可以更新信息以使其更清晰)

Answer 1

您发布的代码应该可以正常工作。这是一个例子:

function Item() {
  self.txt = ko.observable("Test observable");
}

function RootViewModel() {
  var self = this;
  self.items = ko.observableArray([new Item(), new Item()]);

  $('#searchProduct').modal('show');

  $('#searchProduct').on('hidden.bs.modal', function () {
    self.items.removeAll();
  });
}

ko.applyBindings(new RootViewModel());

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div id="searchProduct" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">Fake Modal</div>
  </div>
</div>

<table>
  <tbody>
    <tr style="display: none" data-bind="visible: items().length == 0">
      <td class="text-center alert alert-warning" colspan="4"><b>There's no coincidences</b>
      </td>
    </tr>
    <!-- ko foreach: items -->
    <tr>
      <td data-bind="text: txt"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

但请注意，我建议使用 a custom binding handler for show/hide of a bs modal ，您不应该在 View 模型内处理 DOM 交互(例如 on 处理程序)。