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>」とかの後。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF−8">
- <title>「ハローワールド」レベルのサンプルソースの記述</title>
- <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
- </head>
- <body>
- <p>First name: <strong data−bind="text: firstName"></strong></p>
- <p>Last name : <strong data−bind="text: lastName"></strong></p>
- <script type="text/javascript">
- function AppViewModel() {
- this.firstName = "re";
- this.lastName = "catnap";
- }
- ko.applyBindings(new AppViewModel());
- </script>
- </body>
- </html>
※「knockout」のファイル（ライブラリ？）へのパスは適宜調整。これが分からないとHTMLの基本からやり直した方が良いかと。
これを表示しようとすると「ko.applyBindings(new AppViewModel());」によって「AppViewModel()」で「firstName」「lastName」が設定。
strongタグの「data−bind」の「firstName」と「lastName」が対応する値を表示。
「ハローワールド」レベルのサンプルにJQUERYを追加
JQUERY側で「ドキュメントを読み込んだとき」ってのを追加。
追加することによって好きな箇所に「script」を記載できる。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF−8">
- <title>「ハローワールド」レベルのサンプルソースの記述</title>
- <script type="text/javascript" src="knockout−2.1.0beta.js"></script>
- <script type="text/javascript" src="jquery−1.5.1.min.js"></script>
- <script type="text/javascript">
- $(function () {
- function AppViewModel() {
- this.firstName = "re";
- this.lastName = "catnap";
- }
- 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>
- </body>
- </html>
※「jquery」のファイル（ライブラリ？）へのパスは適宜調整。