jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみる

jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみます。

サンプルは以前参加した勉強会から流用します。
「JavaScript＆TypeScript＋Knockout勉強会（AWDD#7）」に行ってきた（その１「JavaScriptで作る動的ウェブサイト入門」by 金箱遼さん） - プログラマーな日々
動的ウェブサイトをつくってみる

検証環境

Visual Studio Express 2013 for Web Update 2
Web Essentials 2013 for Update 2

jQueryを使った動的ウェブサイトのサンプル

ソースコード

確かこんな感じだったと記憶しています。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    シャンプーの残量：
    <span id="volume"></span>
    <button id="push" onclick="push(); showVolume();">プッシュする</button>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        var volume = 500;
        showVolume();

        function push() {
            if (volume < 100) {
                volume = 0;
                return;
            }

            volume -= 100;
        }

        function showVolume() {
            $('#volume').text(volume);
        }
    </script>
</body>
</html>

動作

初期表示

f:id:JHashimoto:20140716055635p:plain

[プッシュする]を押す

残量が100減ります。
f:id:JHashimoto:20140716055640p:plain

Knockout.jsで書き直してみる

Knockout.jsをインストールする

NuGetで「Knockoutjs」と入力し（「Knockout.js」ではないので、ご注意）、インストールします。
f:id:JHashimoto:20140716060652p:plain

Knockout.jsを読み込む

ソリューションエクスプローラーから、jsファイルをドラッグアンドドロップすると、scriptタグが生成されます。
f:id:JHashimoto:20140716061052p:plain

ソースコード

バインディングにより、showVolumeとID指定の要素参照がなくなって、すっきりしました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    シャンプーの残量：
    <span id="volume" data-bind="text:volume"></span>
    <button id="push" data-bind="click:push">プッシュする</button>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script type="text/javascript">
        function ShampooViewModel() {
            var self = this;
            self.volume = ko.observable(500);

            self.push = function () {
                if (self.volume() < 100) {
                    self.volume(0);
                    return;
                }
                self.volume(self.volume() - 100);
            }
        }

        var viewModel = ShampooViewModel();
        ko.applyBindings(viewModel);
    </script>
</body>
</html>