使用 Knockout 获取可观察对象绑定的元素? [英] Get element an observable is bound to with Knockout?

查看:28
本文介绍了使用 Knockout 获取可观察对象绑定的元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

== 更新 ==

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

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

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

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

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

== 编辑 2 ==

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

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

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

解决方案

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

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

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

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

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

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 only gives 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.

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.

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.

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)

== Edit 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):

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.

解决方案

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

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

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

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

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.

这篇关于使用 Knockout 获取可观察对象绑定的元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆