computed observableの作成
他のプロパティの値を加工してできるプロパティをcomputed observableと呼びます。例えば、lastNameとfirstNameを使って氏名を返すfullNameというcomputed observableを実装してみましょう。まずHTML側に表示する場所を作ります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>
<p>姓: <strong data-bind="text: lastName"></strong></p>
<p>名: <strong data-bind="text: firstName"></strong></p>
<p>姓: <input data-bind="value: lastName"></p>
<p>名: <input data-bind="value: firstName"></p>
<p>氏名: <strong data-bind="text: fullName"></strong></p>
</div>
<script src="js/knockout-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</body>
</html>
そして、ビューモデルでko.computed()に関数を渡してプロパティを定義します。この関数の戻り値がHTMLに表示される内容となります。HTML側ではlastNameもfullNameも書き方は変わりませんが、ビューモデル側での定義の仕方によってプロパティの種類が変わります。
class AppViewModel
constructor: ->
@firstName = ko.observable "龍馬"
@lastName = ko.observable "坂本"
# computed observableを追加する
@fullName = ko.computed =>
@lastName() + @firstName()
ko.applyBindings new AppViewModel
図4 表示結果
HTMLをブラウザで開いてテキストフィールドの値を変えると、変更したデータが即座にビューモデルに反映され、氏名に表示される文字列も自動的に変わります。
ボタンクリックでアクションを実行する
ボタンがクリックされた時にビューモデルのメソッドを実行するには、data-bind属性でclick: メソッド名を指定します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>
<p>姓: <strong data-bind="text: lastName"></strong></p>
<p>名: <strong data-bind="text: firstName"></strong></p>
<p>姓: <input data-bind="value: lastName"></p>
<p>名: <input data-bind="value: firstName"></p>
<p>氏名: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: swapChars">入れ換える</button>
</div>
<script src="js/knockout-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</body>
</html>
そしてビューモデル側では@swapCharsに関数を代入します。こうすると、ボタンがクリックされた時にswapCharsメソッドが実行されます。
class AppViewModel
constructor: ->
@firstName = ko.observable "龍馬"
@lastName = ko.observable "坂本"
@fullName = ko.computed =>
@lastName() + @firstName()
@swapChars = =>
# 文字を入れ換える
reversed = @firstName().split('').reverse().join('')
# @firstNameにセットする
@firstName reversed
# 文字を入れ替えて@lastNameにセットする
@lastName @lastName().split('').reverse().join('')
ko.applyBindings new AppViewModel
図5 表示結果
値の変更通知を受ける
ko.observable()で作成した変数に対してsubscribe()でコールバックを登録しておくと、値が変更された時にコールバック関数が実行されます。
@firstName = ko.observable "龍馬"
@firstName.subscribe (newValue) ->
console.log "名が#{newValue}に変更された"
その他、Knockoutの詳しい使い方はWebサイトやチュートリアル（英語）を参照してください。
