knockout.js inputに入力した文字を反映

2012/04/10

ソース

computedプロパティを使って下記のようなソースにするとinputの片方を変更したらすぐに反映。

  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.  
  20.     ko.applyBindings(new AppViewModel());
  21.   })();
  22. </script>
  23.  
  24. </head>
  25. <body>
  26.  
  27. <p>First name: <input data−bind="value: firstName" /></p>
  28. <p>Last name: <input data−bind="value: lastName" /></p>
  29. <p>Full name: <strong data−bind="text: fullName"></strong></p>
  30.  
  31. </body>
  32. </html>

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

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