knockout.js ボタンクリックで大文字に変換

2012/04/10

ソース

「button」タグに「data-bind」属性で「click」を指定して呼び出したい関数を指定すれば良いみたい。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF−8">
  5. <title>knockoutjsちゅーとりある:ボタンクリックで大文字変換</title>
  6. <script type="text/javascript" src="jquery−1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
  8.  
  9. <script type="text/javascript">
  10.   $(function () {
  11.     function AppViewModel() {
  12.       this.firstName = ko.observable("Bert");
  13.       this.lastName = ko.observable("Bertington");
  14.  
  15.       this.fullName = ko.computed(function() {
  16.         return this.firstName() + " " + this.lastName();
  17.       }, this);
  18.  
  19.       this.capitalizeLastName = function() {
  20.         var currentVal = this.lastName();
  21.         this.lastName(currentVal.toUpperCase());
  22.       };
  23.     }
  24.  
  25.     ko.applyBindings(new AppViewModel());
  26.   })();
  27. </script>
  28.  
  29. </head>
  30. <body>
  31.  
  32. <p>First name: <input data−bind="value: firstName" /></p>
  33. <p>Last name: <input data−bind="value: lastName" /></p>
  34. <p>Full name: <strong data−bind="text: fullName"></strong></p>
  35.  
  36. <button data−bind="click: capitalizeLastName">Go caps</button>
  37.  
  38. </body>
  39. </html>

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい