nprogram’s blog

気ままに、プログラミングのトピックについて書いていきます

Knockout Custom ComponentをTypeScriptで記述

TypeScript Knockout

実行イメージ

f:id:nprogram:20160715072126p:plain

注意ポイント

Windowオブジェクトのonloadイベントハンドラにおいて、 applyBindings関数呼び出し前に、先にComponentを登録しておきましょう。 (以下の例では、"name-editor" という名前のComponent)

なお、Knockout.jsのapplyBindings関数とは、Knockout.jsをアクティブ化する（ビューモデルとビューを関連付ける）ためのものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title> Component Example </title>
    <script src="Scripts/knockout-3.4.0.debug.js"></script>
    <script src="app.js"></script>

    <script type="text/html" id="my-component-templete">
        <p>Enter your name: <input data-bind='value: name' /></p>
        <p>You entered <strong data-bind='text: name()'></strong></p>
    </script>
</head>

<body>
    <name-editor params="value: 'hello world'"></name-editor>
    <div data-bind="component: { name: 'name-editor', params: { value: 'hoge bar' } }"></div>
</body>
</html>

/// <reference path="scripts/typings/knockout/knockout.d.ts" />

class ViewModel{

    name: KnockoutObservable<string> = ko.observable<string>();
    constructor(params: any) {
        this.name(params.value);
    }
}

// MyViewModelメソッド
class MyViewController {
    constructor() { }
}

// Windowオブジェクトのonloadイベントハンドラに、JavaScriptコードを登録します。
window.onload = function () {

    // ko.components.register を使い "name-editor" という名前のComponentを登録しています。
    ko.components.register('name-editor', {
        viewModel: ViewModel,
        template: { element: 'my-component-templete' }
    });

    ko.applyBindings(new MyViewController());
};