knockout.js - 如何获取使用特定 knockout 绑定(bind)的所有元素的列表？

Question

knockout website告诉我们如何从该元素的自定义绑定(bind)中访问特定元素的所有绑定(bind)。

但是，我想获取应用特定命名绑定(bind)的所有元素的列表。这可以通过 knockout 方法实现吗？

例如，我想要求 knockout 我的页面上使用可见绑定(bind)的所有元素的列表。

Answer 1

有趣的问题!

我要出去说你需要做DOM traversal你自己。没有完全符合您要求的 Knockout 实用程序。即便如此，您也必须深入 KO。这是基于一些经验，以及仔细查看 KO TypeScript definition (这可能是对 KO 导出功能的近乎完整的概述)。

看the relevant bit在定义中，您可以使用 KnockoutBindingProvider像这样:

var vm = {
  submodel: {
    name: ko.observable('apple'),
    description: ko.observable('fruit')
  },
  elementsWithTextBindings: ko.observable('')
};

vm.refresh = function() {
  var result = "";
  var all = document.getElementsByTagName("*");
  
  for (var i=0, max=all.length; i < max; i++) {
    var ctx = ko.contextFor(all[i]);
    
    if (ko.bindingProvider['instance'].nodeHasBindings(all[i])
        && !!ko.bindingProvider['instance'].getBindings(all[i], ctx).text) {
      var bindings = ko.bindingProvider['instance'].getBindingsString(all[i], ctx);
      result += "Elem with id=" + all[i].id + " has `text` binding ('" + bindings + "').\n";
    }
  }
  vm.elementsWithTextBindings(result);
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="a" data-bind="with: submodel">
  <p id="b" data-bind="text: name, style: { color: 'red' }"></p>
  <p id="c" data-bind="text: description"></p>
  <input id="d" data-bind="value: name" />
</div>
All elements with `text` bindings:
<button id="e" data-bind="click: refresh">refresh!</button>
<pre id="f" data-bind="text: elementsWithTextBindings"></pre>

这利用了您可以到达 ko.bindingProvider 的事实。从外部。这似乎是 by design ，因为源将其导出为:

ko.exportSymbol('bindingProvider', ko.bindingProvider);

在我的代码中，我还使用了 nodeHasBindings , 和 getBindings , 和 getBindingsString .后者有 a comment :

// The following function is only used internally by this default provider.
// It's not part of the interface definition for a general binding provider.

所以我假设前两种方法是公共(public)接口(interface)的一部分，因此可以安全地用于您的目的。 getBindingsString无论如何，这对于您的目的并不是必需的，但我只是为了示例而将其包含在示例中。