0

ノックアウト用の読み取り専用バインディングを作成しています。

このフィドルで示されているように、各要素にバインディングを適用するとうまく機能します: 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']()

もちろん、各要素の data-bind 属性を解析することもできますが、それは汚いようです。他に良い方法はありますか？

4

2 に答える 2

0

Knockout の「有効化」または「無効化」バインディングが機能しないと確信していますか? これらはすべて、同じ「readOnly」監視可能フラグを共有できます。

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: ""
};
于 2013-10-26T17:38:32.997 に答える
0

7zark7 へのあなたのコメントに基づいて、あなたが本当に欲しいのはifとifnotバインディングだと思います:

<label>Had caffeine fix
  <img src="checkmark.png" data-bind="if: isReadOnly() && coffeeConsumed()">
  <input type="checkbox" data-bind="ifnot: isReadonly, checked: coffeeConsumed">
</label>
于 2013-10-29T20:35:27.907 に答える