I’m in need of a method of taking a property on a model and returning a list of DOM objects, let’s call them, that are bound to that property.
For instance:
<input type="text" value.bind="MyProperty" />
Is there a way I can run a function like below to retrieve this input?:
BindingEngine.GetDOMObjects('MyProperty')
I’m aware of ref, but it needs to be more generic than this. The function would also need to be robust enough to know how to cross multiple levels of bindings to reach its ultimate destination. For example, we have many custom components created to handle specific behaviors, like select lists. So much of our markup looks like:
view model (A) property “MyProperty” ->
binds to value on <custom-select value.bind="MyProperty" > ->
binds to the view model (B) of that custom component value ->
binds to the select list inside that custom component
so running
BindingEngine.GetDOMObjects('MyProperty')
Would hopefully be able to traverse all the way to that select list contained within the custom component. I know it’s a long shot, but any help is appreciated.
To my understanding, bindingEngine has no knowledge about view layer, it uses different strategies to observe property changes. Views then hold those observers to respond to property changes.
The stuff you want, is unlikely fitting into MVC/MVVM. If you can elaborate what you want to do with those DOM elements, maybe we can find alternative way to achieve it.
I guess you could create a custom attribute to decorate all dom elements using the property. Then you just store a dictionary of property names to elements in a singleton service.
You’ll need to make sure to unregister elements from the dict as soon as the marked element gets unbound. <custom-select value.bind="MyProperty" tracked="MyProperty">
Sounds very finicky and clumsy. Have you considered looking a different approach to your use case?