knockout.js 入門・初心者向け情報を見る前の基本

2012/04/10

いろんなサイトに色々と書かれているけどソースを全部書いてくれているサイトが見つけられない。
とりあえず必要な内容。

必要なファイル

「knockout.js」と「jquery」のファイル(ライブラリ?)が必要。

「knockout.js」は「knockoutjs.com」、
「jquery」は「jquery.com」からダウンロード。

「ハローワールド」レベルのサンプル

実行したら「strong」タグ内の文字がそれぞれ「data-bind」の指定(?)した文字列に置き換え。
※「script」タグの位置に注意:「<strong data−bind="text: firstName"></strong>」とかの後。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF−8">
  5. <title>「ハローワールド」レベルのサンプルソースの記述</title>
  6. <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <p>First name: <strong data−bind="text: firstName"></strong></p>
  11. <p>Last name : <strong data−bind="text: lastName"></strong></p>
  12.  
  13. <script type="text/javascript">
  14. function AppViewModel() {
  15.   this.firstName = "re";
  16.   this.lastName = "catnap";
  17. }
  18.  
  19. ko.applyBindings(new AppViewModel());
  20. </script>
  21. </body>
  22. </html>

※「knockout」のファイル(ライブラリ?)へのパスは適宜調整。これが分からないとHTMLの基本からやり直した方が良いかと。

これを表示しようとすると「ko.applyBindings(new AppViewModel());」によって「AppViewModel()」で「firstName」「lastName」が設定。
strongタグの「data−bind」の「firstName」と「lastName」が対応する値を表示。

「ハローワールド」レベルのサンプルにJQUERYを追加

JQUERY側で「ドキュメントを読み込んだとき」ってのを追加。
追加することによって好きな箇所に「script」を記載できる。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF−8">
  5. <title>「ハローワールド」レベルのサンプルソースの記述</title>
  6. <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
  7. <script type="text/javascript" src="jquery−1.5.1.min.js"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10.   function AppViewModel() {
  11.     this.firstName = "re";
  12.     this.lastName = "catnap";
  13.   }
  14.  
  15.   ko.applyBindings(new AppViewModel());
  16. })();
  17. </script>
  18. </head>
  19. <body>
  20.  
  21. <p>First name: <strong data−bind="text: firstName"></strong></p>
  22. <p>Last name : <strong data−bind="text: lastName"></strong></p>
  23.  
  24. </body>
  25. </html>

※「jquery」のファイル(ライブラリ?)へのパスは適宜調整。

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

2017-11-09
PCでプッシュ通知ってのをしたい。
2017-11-06
PHPのバージョンを上げたらwikiが壊れたっぽい。
2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。