Knockoutを使ってみた - 条件式を使って表示内容を切り替える

handcraft 5/2/2015 7017 1 AspDotNet

引き続き Knockout を使う方法の覚書を記載していきます。以下の記事でtextやhtmlなどシンプルなバインディング構文のサンプルとコレクション(配列)をバインドする方法を記載しました。

今度は true / false を評価して真偽値(条件) を評価した結果表示内容を変更するサンプルを記載します。今回のサンプルも引き続き KnockoutJS 3.3 を使っています。

1. 条件を評価して表示/非表示を切り替える

バインディング構文中に次のように簡易的な方法で真偽値を評価した結果表示する内容を切り替えることができます。条件には javascriptの式や真偽値を返す関数を使用できます。

条件 ? true の場合にバインドするオブジェクト : false の場合にバインドするオブジェクト

他に visible バインディングを使用できます。visibleバインディングを使用すると式を評価した結果 false の場合スタイルの displayをnoneを設定します。trueと評価された場合 block になります。if もしくは ifnot バインディングを使用すると DOMレベルで要素の追加/削除を行えます。ifバインディングの場合は true と評価された場合は要素をDOMツリーに追加します。falseの場合はDOMツリーから要素を削除します。ifnotの場合はその逆になります(この動作はDOM Explorerで確認できます)。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>条件を使うサンプル</title>
</head>
<body>
    <h1>簡単な条件式による出力内容の変更</h1>
    <div id="testA">
        値は 100　<span data-bind="text: (value > 100) ? 'より大きい' : '以下'"></span> です。
    </div>
    <h1>Visible バインディングを使用した表示非表示の切り替え</h1>
    <div id="testB">
        <input type="button" data-bind="click: toggle" value="切り替え" />
        <p data-bind="visible: isVisible" style="display:none">
            ここの内容の表示が切り替わります。
        </p>
    </div>
    <h1>ifとifnot バインディングを使用した表示非表示の切り替え</h1>
    <div id="testC">
        <input type="button" data-bind="click: toggle" value="切り替え" />
        <p data-bind="if: isVisible">
            ifバインディング:isVisibleがtrueの場合に表示されます
        </p>
        <p data-bind="ifnot: isVisible">
            ifnotバインディング:isVisibleがfalseの場合に表示されます
        </p>
    </div>
    <h1>ifとifnot バインディングを使用した表示非表示の切り替え(コメントバージョン)</h1>
    <div id="testD">
        <input type="button" data-bind="click: toggle" value="切り替え" />
        <p>
            <!-- ko if:isVisible -->
            ifバインディング:isVisibleがtrueの場合に表示されます
            <!-- /ko -->
            <!-- ko ifnot:isVisible -->
            ifnotバインディング:isVisibleがfalseの場合に表示されます
            <!-- /ko -->
        </p>
    </div>
    <script type="text/javascript" src="/Scripts/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        function viewModelA(value) {
            var self = this;
            self.value = value;
        };
        ko.applyBindings(new viewModelA(101), $("#testA").get(0));

        function viewModelB() {
            var self = this;
            self.isVisible = ko.observable(false);

            self.toggle = function () {
                self.isVisible(!self.isVisible());
            }
        };
        ko.applyBindings(new viewModelB(), $("#testB").get(0));
        ko.applyBindings(new viewModelB(), $("#testC").get(0));
        ko.applyBindings(new viewModelB(), $("#testD").get(0));
    </script>

</body>
</html>

サンプルでは表示を切り替えるために isVisible変数を observable オブジェクトにしています。これにより値に変更が発生したらKnockoutJSによりバインドされている値が自動的に再評価されるようにしています。その他サンプルでは1つのページで複数のVIewModelをバインドする例もお見せしています。

2.まとめ

説明は以上です。ここまでの知識でも結構いろいろなことができるようになっています。

// Net planet-es V2