61

knockout.jsライブラリには、HTML要素属性の値（「タイトル」など）を動的に変更できる"attr"データバインディングがあります。ただし、場合によっては、バインドされたオブジェクトの対応するオブザーバブルに応じて、属性が必要な場合と不要な場合があります。たとえば、モデルに監視可能な「タイトル」がある場合、「タイトル」属性が存在する場合（null以外）に設定するか、属性が存在しない場合（null）に属性を完全にスキップすることができます。

ノックアウトは、条件付きで属性を設定する方法を提供しますか？（理想的には、要素の開始タグ全体を条件付きでレンダリングすることなく...）

[注]この同様の名前の質問は、実際にはノックアウトのCSSクラスの特別な処理によって解決され、この質問（またはそれ自体のタイトル）とは関係ありません：knockoutjsを使用してcssクラスを条件付きでレンダリングする方法

4

4 に答える 4

97

<option>（組み込みのノックアウトではなく手動で生成していた）を選択するときにこれが必要でした。

<option 
 data-bind="text: text, 
    attr:{
     value:value,
     'selected': typeof(selected) !== 'undefined' ? selected : null 
     }">
 Choice X
</option>

これは、常に「text」属性を更新し、「value」属性を追加することを意味しますが、データに「selected」の値がすでに定義されている場合にのみ「selected」を追加します。

于 2013-05-30T16:22:53.943 に答える
29

属性を追加するかどうかにかかわらず、特定の監視可能なブール値をチェックするカスタムバインディングattrIfを作成できます。この例を参照してください。

ko.bindingHandlers.attrIf = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var h = ko.utils.unwrapObservable(valueAccessor());
        var show = ko.utils.unwrapObservable(h._if);
        if (show) {
            ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor);
        } else {
            for (var k in h) {
                if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) {
                    $(element).removeAttr(k);
                }
            }
        }
    }
};

<a href="#" data-bind="attrIf: {title: title, _if: flag}">link</a>
于 2012-10-18T21:14:36.843 に答える
8

Knockoutの「attr」データバインディングは、このシナリオをサポートします。getDisabledState（）関数からnullまたは未定義を返すだけで、属性は出力されません。

この回答は、「readonly」や「disabled」などの属性を持つKnockoutattrバインディングから取得されました。

于 2013-07-25T18:57:07.123 に答える
2

@gbsに返信できればよかったのですが、できません。私の解決策は、同じHTML要素を2つ持つことでした。1つは属性付き、もう1つは属性なし、そして要素に応じて1つを追加するノックアウト条件です。このカスタム入札についても知っていますが、どちらのソリューションがより効率的ですか？

于 2012-10-25T12:28:22.580 に答える