Knockoutを使ってみた - 簡単なバインディングを行ってみる

handcraft 4/24/2015 3998 N/A AspDotNet

Knockoutを使うようになったので、覚書を記載しておきます。

今回は基本である text , html バインディングと属性をバインドする attr バインディング, style と class を設定する style, css バインディングの簡単なサンプルを記載します。

動作を確認した KnockoutJS のバージョンは次の通りです

KnockoutJS のバージョン 3.3

1. text と html バインディング

ViewModel のプロパティやメソッドにバインドする場合、 text や html バインディングを使用するのが基本です. text バインディングの場合は < > などエスケープが必要な文字は自動的に html エンコードされてバインドされます。htmlバインディングの場合はバインドする文字列にマークアップが含まれていてもそのままマークアップとしてバインドされます。

簡単なサンプルコードは次の通りです。 textやhtmlバインディングでは ViewModelのプロパティやメソッドにバインドできます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>KnockoutJS の簡単なバインディングのサンプル</title>
</head>
<body>
    <!-- text バインディング -->
    <h1><span data-bind="text: name"></span>さん</h1>
    <!-- html バインディング-->
    <p data-bind="html: getName()"></p>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        function viewModel(name) {
            var self = this;

            self.name = name;
            self.getName = function () {
                return "こんにちは <em>" + self.name + "</em>さん<br/> よろしくお願いします。";
            }
        }
        var vm = new viewModel("KO 太郎");
        ko.applyBindings(vm)
    </script>
</body>
</html>

2. attr , css , style バインディング

HTMLの要素(ノード)の属性をバインドする場合は attr バインディングを使用します。スタイルシートのクラスを指定する場合は css バインディングを使用します。 style 属性にバインドする場合は style バインディングを使用します。下のサンプルのstyleバインディングの例のように ''シングルクォーテーションで文字列を指定することで、ビューモデルのプロパティではなく、値を直接バインドすることもできます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .sample{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div data-bind="style:{ margin: '10px' }">
        <a data-bind="attr:{id: id, href : url}, css: css"><span data-bind="text: text"></span></a>
    </div>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        function viewModel(name) {
            var self = this;
            
            self.id = "1234567";
            self.url = "https://www.bing.com/";
            self.text = "Bing";
            self.css = "sample";
        }
        var vm = new viewModel();
        ko.applyBindings(vm)
    </script>

</body>
</html>

まとめ

簡単ですが説明は以上です。

次の章ではループ処理や条件を使用する方法を取り扱います。

// Net planet-es V2