敲除获取绑定到 DOM 元素的可观察量

knockout get observables bound to DOM element

本文关键字:观察 元素 DOM 获取 绑定      更新时间:2023-09-26

我正在为挖空进行只读绑定。

如果我对每个元素应用绑定,我就可以很好地工作,如以下小提琴所示: http://jsfiddle.net/paulinfrancis/wDJ9n/

但是,我希望能够将绑定设置为视图的根元素,而不是在每个表单元素上:

<div data-bind="readonly: isReadonly">
    <!-- My form elements here -->
</div>
ko.bindingHandlers.readonlyView = {
init: function(element, valueAccessor){
    var isReadOnly = ko.unwrap(ko.unwrap(valueAccessor()));
        if (isReadOnly) {
            var $elements = $(':text, :radio, :checkbox, :input', $(element));
            $elements.each(function(){
                var domElement = this;
                ko.cleanNode(domElement);
                var $domElement = $(domElement);
                if ($domElement.is(':text')) {
                    //I need the observable bound to the textbox text
                } else if ($domElement.is(':radio')) {
                    //I need to determine if the radio btn is checked
                } else if ($domElement.is(':checkbox')) {
                    //I need to determine if the checkbox is checked
                } else if($domElement.is(':input')) {
                    $domElement.prop('disabled', true);
                }
            })
        }
    }
}

不确定如何获取元素绑定到的视图模型属性名称,以便我可以将现有元素替换为我选择的只读对应项。

我可以使用 dataFor 或 contextFor 访问我需要的值,但我需要先知道绑定的属性名称:

ko.dataFor(domElement)['observableOne']()
ko.contextFor(domElement).$data['observableOne']()

我当然可以解析每个元素上的数据绑定属性,但这似乎很脏。还有其他更好的方法吗?

您确定 Knockout "启用"或"禁用"绑定对您不起作用吗?它们都可以共享相同的"只读"可观察标志。

http://knockoutjs.com/documentation/enable-binding.html

<p>
  Your cellphone number:
  <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>
...
var viewModel = {
    hasCellphone : ko.observable(false),
    cellphoneNumber: ""
};
我认为

,根据您对 7zark7 的评论,您真正想要的是ififnot绑定:

<label>Had caffeine fix
  <img src="checkmark.png" data-bind="if: isReadOnly() && coffeeConsumed()">
  <input type="checkbox" data-bind="ifnot: isReadonly, checked: coffeeConsumed">
</label>