CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編（4）

CoffeeScriptによるモダンなWebアプリケーション開発 第10回

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サイトやチュートリアル（英語）を参照してください。