web-dev-qa-db-ja.com

「読み取り専用」や「無効」などの属性を持つKnockout attrバインディング

Knockoutの "attr"データバインディングを"readonly"や"disabled"などのスタンドアロン属性とともに使用するための「ベストプラクティス」の推奨される方法は何ですか？

これらの属性はspecialであり、通常は属性値を属性名に設定することで有効になります（ただし、属性名を含めるだけで多くのブラウザが正常に動作します） HTMLに値がない場合）：

<input type="text" readonly="readonly" disabled="disabled" value="foo" />

ただし、do n'tにこれらの属性を適用したい場合、一般的には（readonly = "false"のようなものを実行するのではなく）HTMLから属性を完全に省略します。

<input type="text" value="foo" />

Knockoutの「attr」データバインディングはこのシナリオをサポートしていません。属性名を指定したらすぐに、値も指定する必要があります。

<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />

「無効」または「読み取り専用」をオフにするクロスブラウザーの方法はありますか？または、アイテムを無効にしたくない、または読み取り専用にしたくない場合、カスタムバインディングをレンダリングしないように使用できるトリックanythingがありますか？

htmldata-bindingknockout.jsreadonlydisabled-input
25
Armchair Bronco

Knockoutの「attr」データバインディングはこのシナリオをサポートしていますが、getDisabledState()関数からnullまたはundefinedを返すだけで、属性を出力しません。

デモ フィドル 。

40
nemesv

次のように読み取り専用のバインディングを作成することもできます。

ko.bindingHandlers['readonly'] = {
'update': function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (!value && element.readOnly)
        element.readOnly = false;
    else if (value && !element.readOnly)
        element.readOnly = true;
}
};

出典： https://github.com/knockout/knockout/issues/11

9
Greg Gum

Knockoutには enable バインディングと disable バインディングがあります。

質問されたときにこれらが利用可能であったかどうかはわかりませんが、この問題を参照している人は誰でも知っておく必要があります。

7
Frank Hiller