Knockout.js 日本語ドキュメント Hello World デモ
Knockout ES5 でより自然な書き方へ
上記サイトを参考にHello World デモをknockout + knockout-es5 + TypeScript で書いてみた。
index.html
<!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>
<p>ファーストネーム: <input data-bind="value: firstName" /></p>
<p>ラストネーム: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: getFullName()"> </span>!</h2>
<script src="../Scripts/knockout-3.1.0.js"></script>
<script src="../Scripts/knockout-es5.js"></script>
<script src="app.js"></script>
</body>
</html>
app.ts
/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/knockout.es5/knockout.es5.d.ts" />
"use strict";
class ViewModel {
firstName: string;
lastName: string;
constructor(first, last) {
this.firstName = first;
this.lastName = last;
ko.track(this);
}
getFullName(): string {
return this.firstName + this.lastName;
}
}
ko.applyBindings(new ViewModel("Planet", "Earth"));