TypeScript+KnockoutJSアプリ (Visual Studio2013)

概要

TypeScript+KnockoutJSアプリのハンズオンを行うための資料です。

初心者向けJavaScript入門からテラ・コーディングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります!

typescriptKnockout010


/index.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <form data-bind="submit: save">
        <p>欲しいものリスト: <span data-bind="text: gifts.length"> </span> 点</p>
        <table data-bind="visible: gifts.length > 0">
            <thead>
                <tr>
                    <th>名前</th>
                    <th>価格</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: gifts">
                <tr>
                    <td><input type="text" data-bind="value: name" /></td>
                    <td><input type="text" data-bind="value: price" /></td>
                    <td><a href="#" data-bind="click: $root.removeGift">削除</a></td>
                </tr>
            </tbody>
        </table>

        <button data-bind="click: addGift">追加</button>
        <button type="submit" data-bind="enable: gifts.length > 0">登録</button>
    </form>

    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/knockout-es5.js"></script>
    <script src="app.js"></script>

</body>
</html>

 

/app.js

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

function bindMySelf(viewModel: any, functionNames: string[]): void {
    functionNames.forEach((functionName) => {
        viewModel[functionName] = viewModel[functionName].bind(viewModel);
    })
}

class ItemViewModel {
    constructor(public name: string, public price: number) {
        ko.track(this); // プロパティ (name, number) を監視できるようにする
    }
}

class GiftSetViewModel {
    constructor(public gifts: ItemViewModel[]) {
        ko.track(this);
        // メンバ関数を View 公開できるようにする
        bindMySelf(this, ['addGift', 'removeGift', 'save']);
    }

    addGift(): void {
        this.gifts.push({
            name: "",
            price: 0
        });
    }

    removeGift(gift: ItemViewModel): void {
        this.gifts.remove(gift);
    }

    save(): void {
        alert('次のようにサーバに送信できます:' + ko.toJSON(this.gifts));
    }
}

ko.applyBindings(new GiftSetViewModel([
    new ItemViewModel('高帽子', 39.95),
    new ItemViewModel('長いクローク', 120.00)
]));

 

 

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です