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>

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

2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。
2017-06-06
FuelPHPのOILでtry・catchを使ったらエラーになった。