如何从可观察对象中获取有界元素 DOM

Question

我需要从一个可观察对象中获取 Element DOM。 请看这个例子。

我点击按钮“获取类”，然后我想获取 valueB DOM 元素。

请注意我想要 valueB DOM 元素而不是 buttonA

示例：

HTML

<button id="buttonA" data-bind="event:{click: getClassFromValueB}">Get Class</button>
<input id="valueB" class="Hello" data-bind="value: observables.idNumber"/>

视图模型

"
"
"
observables : {
    idNumber: ko.observable('SomeText');
},

getClassFromValueB : function(child, event){
    idNumber_DOM = this.getElementDOM(this.observables.idNumber);
},

getElementDOM : function(observable){
    **//WHAT TO DO HERE????**
}
"
"
"

我正在寻找一个没有 jQuery 的解决方案...

$(event.target).closest('#valueB')

更新：这个问题的主要原因是在其他输入之一发生变化时清除输入中的自定义属性 示例：

<input id="InputA" class="Hello" data-bind="event:{change: clearInputB}"/>
<input id="InputB" class="Hello" data-bind="value: observables.idNumber"/>
<input id="InputC" class="Hello" data-bind="event:{change: clearInputB}"/>
<input id="InputD" class="Hello" data-bind="event:{change: clearInputB}"/>

Answer 1

不完全符合您的要求，但也许您可以用不同的方式解决问题。如果你在寻找一个 DOM 元素的类，Knockout 会提供一个css binding。 valueB 的数据绑定语句如下所示：

<input id="valueB" data-bind="css: observables.valueBClass, value: observables.idNumber"/>

然后，您可以拥有另一个名为 valueBClass 的可观察对象，您可以在其中设置 valueB 的类以及从其他可观察对象中检索它。

valueBClass = ko.observable('Hello');

getClassFromValueB = function() {
    var theClass = observables.valueBClass();
}

您在保持 DOM 和模型分离的正确轨道上。这是使用 Knockout 时有时会忽略的一个重要概念。由于将它们分开，您不会在 Knockout 模型的任何地方引用任何 DOM 元素。你只会引用 observables。