2016年12月05日

初めてのTypeScript (3) - knockout.jsを利用してみる

   このエントリーをはてなブックマークに追加 Clip to Evernote

これは TypeScript Advent Calendar 2016 の5日目の記事です。 

前回「初めてのTypeScript (2) - jQueryを利用してみる」の続きです。

今度は、jQueryではなく、knockout.jsをTypeScriptで使ってみます。

パッケージのインストール

まずは、NuGetで以下の2つをインストールします。

knockout.js,  knockout.TypeScript.DefinitelyTyped

index.html の定義

htmlをknockout.js用に書き換えます。

<!DOCTYPE html>
<html lang="ja-jp">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/knockout-3.4.0.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h2>TypeScript HTML App</h2>
    <div data-bind="text: nowTime"></div>
    <br>
    <button data-bind="click: onClick, text:buttonFace" type="button" >Start</button>
</body>
</html>

jQueryは使いませんので、読み込む JavaScriptは、knockout-3.4.0.js と app.js の2つです。

data-bind="..."
という箇所が、knockout用の記述です。id属性は不要です。

ViewModel の定義

前回のGreeter クラスをもとに、GreeterViewModel クラスを定義します。

class GreeterViewModel {
    private timerToken: number = null;
    buttonFace: KnockoutObservable<string> = ko.observable(null);
    nowTime: KnockoutObservable<string> = ko.observable("");
    onClick = () => {
        if (this.isRunning()) {
            this.stop();
        } else {
            this.start();
        }
    };

    constructor(buttonFace: string) {
        this.buttonFace(buttonFace);
    }

    private nowString(): string {
        return "The time is: " + new Date().toUTCString();
    }

    private isRunning() {
        return this.timerToken !== null;
    }

    private start() {
        this.buttonFace("Stop");
        this.timerToken = setInterval(() => {
            this.nowTime(this.nowString());
        }, 500);
    }

    private stop() {
        clearTimeout(this.timerToken);
        this.timerToken = null;
        this.buttonFace("Start");
    }
}

buttonFace, nowTime, onClick がknockoutでバインドするメンバーになります。このGreeterViewModelクラスの中では、DOMを直接操作している箇所はありません。

このビューモデルは、モデルも兼ねてしまっていますが、そこは大目にみてください。

GreeterViewModelを利用する

では、このGreeterViewModelを利用して、プログラムが動くようにします。

残りのコードを以下に示します。

class Application {
    static run() {
        let greeter = new GreeterViewModel("Start");
        ko.applyBindings(greeter);
    }
}

window.onload = () => {
    Application.run();
}

動かしてみる

では、F5キーを押して動かしてみます。

Startボタンを押すと、時刻が1秒ごとに変化していくのが確認できます。 Stopボタンを押すと、時刻の更新が止まります。



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52479554