javascript 使用 Knockout 获取可观察对象绑定的元素？

Get element an observable is bound to with Knockout?

提问by Grofit

This isn't an ideal situation, but due to another knockout binding I am using I am in a situation where I am needing to get the element an observable is bound to, if it is indeed bound to anything.

这不是一个理想的情况，但由于我使用的另一个淘汰赛绑定，我处于一种情况，我需要获取可观察对象绑定到的元素，如果它确实绑定到任何东西。

So is there a way to do this?

那么有没有办法做到这一点？

== Update ==

== 更新 ==

I didn't want to add any extra context incase it confuses the question, but as it may get an answer more in line with expectations here is the scenario.

我不想添加任何额外的上下文，以防它混淆了问题，但因为它可能会得到更符合预期的答案，这里是场景。

I am using the knockout validation binding, which exposes all the errors using the ko.validation.group(model)method. However the problem is that onlygives you the textual errors, it does not give you any context as to what part of the model gave you those errors. So I have made a small change to the source to now pass back the observable tied to each error, as this may be useful for a few scenarios, but from here I need to be able to tie this to an element so I can display some in-line validation of some kind.

我正在使用淘汰验证绑定，它使用该ko.validation.group(model)方法公开所有错误。然而，问题是只给你文本错误，它没有给你任何关于模型的哪一部分给你这些错误的上下文。所以我对源代码做了一个小改动，现在将与每个错误相关的 observable 传回，因为这可能对一些场景有用，但从这里我需要能够将它绑定到一个元素，以便我可以显示一些某种形式的在线验证。

Knockout Validation provides a very basic in-line validation where it creates a span after your element and you can give it a class, but this is too basic for my needs as currently we are using Qtip and other notification systems to display validation errors, and because of this I need to be able to have a Dom element and an error. So far I have an observable and an error, but I need to tie that observable object (which could be any ko.observable() property from the model) to its given DOM element, if it does have an element binding.

Knockout Validation 提供了一个非常基本的内联验证，它在您的元素之后创建一个跨度，您可以给它一个类，但这对于我的需求来说太基本了，因为目前我们正在使用 Qtip 和其他通知系统来显示验证错误，并且因此，我需要能够拥有一个 Dom 元素和一个错误。到目前为止，我有一个 observable 和一个错误，但我需要将该 observable 对象（可以是模型中的任何 ko.observable() 属性）与其给定的 DOM 元素联系起来，如果它确实有一个元素绑定。

As all I have is an object and I am using validation driven from the model not the UI, the problem is not really going to be solved via a custom binding. Ideally I need to be able to crack open the marry up the observable object (an unknown ko.observable()) to an element.

由于我拥有的只是一个对象，并且我使用的是由模型而不是 UI 驱动的验证，因此问题并不能真正通过自定义绑定来解决。理想情况下，我需要能够将可观察对象（未知对象ko.observable()）与元素结合起来。

Not to go too project specific, but my current project abstracts validation where events are fired off (i.e EventSystem.SendEvent(ValidationEvents.ValidationFailed, <element>, <error>)) then a validation system listens for these events and ties the error to the element, be it a tooltip, a growl style notification, an alert box etc. So I am trying to find the best way to keep this abstraction when driving the validation from the models observables not the ui's DOM elements (i.e jquery-ui)

不要太具体到项目，但我当前的项目抽象了触发事件的验证（即EventSystem.SendEvent(ValidationEvents.ValidationFailed, <element>, <error>)）然后验证系统侦听这些事件并将错误与元素联系起来，无论是工具提示、咆哮样式通知还是警报框等等 所以我试图找到最好的方法来保持这种抽象，当从模型可观察而不是 ui 的 DOM 元素（即 jquery-ui）驱动验证时

== Edit 2 ==

== 编辑 2 ==

I was a bit thrown by the way Knockout Validation knows the elements for observables to put in its own validation elements, however they just piggy back off the existing value binding, so I am just going to change that to add the elements for any validation elements based on their isValidatable()method, at least that way for each error I can tie it to an observable, and for any observables with element bindings I can tie them to the elements, and if there are none then it is fine they would just be form wide validation errors. I will give this a try as this should be something like (not tested yet):

我对 Knockout Validation 知道将 observables 元素放入自己的验证元素的方式感到有些困惑，但是它们只是捎带现有的值绑定，所以我只是要更改它以添加任何验证元素的元素基于他们的isValidatable()方法，至少对于每个错误，我都可以将其绑定到一个 observable，对于任何具有元素绑定的 observable，我可以将它们绑定到元素，如果没有，那么很好，它们只是形式广泛验证错误。我会尝试一下，因为这应该是这样的（尚未测试）：

if(utils.isValidatable(valueAccessor())) {
    valueAccessor().extend({hasElementalBinding: true, elementalBinding: element});
}
else { 
    valueAccessor().extend({hasElementalBinding: false});
}

At around line 250 in the registerValueBindingHandler, I will leave this question open for a while longer incase someone else has a better solution.

在 中的第 250 行左右registerValueBindingHandler，我会将这个问题保留一段时间，以防其他人有更好的解决方案。

采纳答案by Paul Tyng

This won't be very fast, so I would definitely cache the results, but something using jQuery's attribute selectors:

这不会很快，所以我肯定会缓存结果，但是使用 jQuery 的属性选择器：

$('[data-bind*="Property"]')

*=is the attribute contains selector: http://api.jquery.com/attribute-contains-selector/

*=是属性包含选择器：http: //api.jquery.com/attribute-contains-selector/

Obviously this won't catch anything that subscribed manually using the .subscribemethod, but I'm not sure how you would extract element's from the functions anyway.

显然，这不会捕获使用该.subscribe方法手动订阅的任何内容，但我不确定您将如何从函数中提取元素。

Disclaimer:while this solution will probably work, this sounds like a horrible idea to me, I would instead write a custom binding (as mentioned in the comments) or find some other solution.

免责声明：虽然此解决方案可能会奏效，但对我来说这听起来很糟糕，我会改为编写自定义绑定（如评论中所述）或寻找其他解决方案。

回答by Jon Keto

I have done something similar to what you mentioned above. My data-bind tag includes a custom binding:

我做过类似你上面提到的事情。我的数据绑定标签包括一个自定义绑定：

data-bind="... myvalidationbinding: myobservable"

Then in my binding handler I extend the observable

然后在我的绑定处理程序中，我扩展了 observable

ko.bindingHandlers.myvalidationbinding = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    valueAccessor().extend({element: element });
  }
};

And finally my extension is

最后我的扩展名是

ko.extenders.element = function (target, element) {
  target.DOMElement = element;
}

Now I can subscribe to isValid() given by knockout.validation and if not valid, go get the element the observable is bound to and then manipulate it with jQuery.

现在我可以订阅由 Knockout.validation 给出的 isValid() ，如果无效，则获取 observable 绑定到的元素，然后使用 jQuery 对其进行操作。