如何获取使用特定敲除绑定的所有元素的列表? [英] How to get a list of all elements that use a particular knockout binding?

问题描述

淘汰网站告诉我们如何从中访问特定元素的所有绑定在该元素的自定义绑定中.

The knockout website tells us how to access all the bindings of a particular element from inside a custom binding on that element.

但是，我想获取所有应用了特定命名绑定的所有元素的列表.这可以通过淘汰赛方法来实现吗?

However I want instead to get a list of all elements to which a particular named binding is applied. Is this possible through a knockout method?

例如，我想要求敲除页面上使用可见绑定的所有元素的列表.

For example, I'd like to ask knockout for a list of all elements on my page that use the visible binding.

推荐答案

有趣的问题！

我要出去这里说你需要自己进行 DOM遍历.没有可完全满足您需求的Knockout实用程序.即使那样，您也必须深入了解KO.这是基于一些经验，以及仔细地浏览

I'm gonna go out here and say that you need to do the DOM traversal yourself. There is no Knockout util that does exactly what you want. And even then you'll have to hook deep into KO. This is based on some experience, as well as carefully peering through the KO TypeScript definition (which is a probably a near complete overview of KO's exported functionality).

查看相关位在定义中，您可以像这样利用KnockoutBindingProvider:

Looking at the relevant bit in the definition, you can utilize the KnockoutBindingProvider like this:

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的事实.根据设计，这似乎是 ，因为源使用以下命令导出它:

This utilizes the fact that you can reach ko.bindingProvider from the outside. This seems to be by design, as the source exports it with:

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

在我的代码中，我还使用了nodeHasBindings，getBindings和getBindingsString.后者具有评论:

In my code I also utilize nodeHasBindings, and getBindings, and getBindingsString. The latter has 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.

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

因此，我假定前两个方法 是公共接口的一部分，因此可以安全地用于您的目的.无论如何，getBindingsString并不是真正为了您的目的而必需的，但是出于示例的考虑，我在示例中包括了它.

So I'd assume the first two methods are part o the public interface and can thus be safely used for your purposes. The getBindingsString isn't really necessary for your purpose anyways, but I've included in the example just for the example's sake.

这篇关于如何获取使用特定敲除绑定的所有元素的列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！