「Knockout.js」の版間の差分

← 古い編集新しい編集 →

ビジュアルウィキテキスト

@@ 35行目: / 35行目: @@
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name : <strong data-bind="text: lastName"></strong></p>
+</body>
+</html>
+</source>
+computedメソッドで関数をバインドできる。
+<source lang="html5">
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>Knockoutjs - Test01</title>
+  <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
+  <script type="text/javascript" src="knockout-2.0.0.js"></script>
+  <script type="text/javascript">
+    jQuery(function() {
+      // ready関数
+      // knockoutjsはDOMが準備されてからじゃないと動かないよ。
+      // モデル
+      var AppViewModel = function() {
+        // observable
+        this.firstName = ko.observable("Mono");
+        this.lastName  = ko.observable("Book");
+        // computed
+        this.fullName = ko.computed(function() {
+          return this.firstName() + " " + this.lastName();
+        }, this);
+        this.capitalizeLastName = function() {
+          var currentVal = this.lastName();
+          this.lastName(currentVal.toUpperCase());
+        };
+      };
+      // バインディング
+      ko.applyBindings(new AppViewModel());
+    });
+  </script>
+</head>
+<body>
+  <p>First name: <strong data-bind="text: firstName"></strong></p>
+  <p>Last name : <strong data-bind="text: lastName"></strong></p>
+  <p>Full name : <strong data-bind="text: fullName"></strong></p>
+  <button data−bind="click: capitalizeLastName">Go caps</button>
 </body>
 </html>