Knockoutを使って画面に要素を表示します。
スクリーンショット
hello wrold!
を表示します。
ソースコード
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<body>
<span data-bind="text: message"></span>
<script>
ko.applyBindings({
message: 'hello wrold!'
});
</script>
</body>
CDN
環境の準備を簡単にするため、KnockoutはCDN経由で取得します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
binding
<span data-bind="text: message"></span>
htmlにViewModelのプロパティをバインドします。
data-bind
属性で、バインド先の属性名とバインドするプロパティ名を指定します。
ViewModelを適用
ko.applyBindings({
message: 'hello wrold!'
});
ko.applyBindings
関数にViewModelを渡します。
ViewModelはオブジェクトで構いません。
ViewModelにバインドするプロパティmessage
を定義します。
感想
ここまでだとhtmlの属性で書く、変わった記法のテンプレートエンジンに見えます。
関連記事
リンク
割と日本語のドキュメントが多いのに助かります。