| 最新版 |
編集中の文章 |
| 1行目: |
1行目: |
| − | '''Knockout.js'''（のっくあうと）とは、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。 | + | '''Knockout'''（のっくあうと）とは、[[jQuery]]上に構築された、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]]フレームワークである。 |
| | | | |
| − | Knockout.jsのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockout.jsは[[MVVM]]なので別物だと思うがどうなんだろう？
| + | [[ASP.NET MVC]]の中の人が作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっている。 |
| | | | |
| − | == 概要 ==
| + | 2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄い。 |
| − | Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]の中の人が中心となって作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっていたが、土壇場でキャンセルされた模様である。なお、Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]が無くても単体で使える。現実的な話では少なくとも[[jQuery]]はあった方がいいが。
| |
| − | | |
| − | 2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。Knockout.jsは[[Twitter Bootstrap]]、[[PHP]]とあわせ[[strict]]教の信者には受け入れがたいと言われている。 | |
| − | | |
| − | == 導入 ==
| |
| − | [[Visual Studio]]を使っているのであれば[[NuGet]]から簡単に導入できる。
| |
| − | | |
| − | == 関数 ==
| |
| − | * [[Knockout.js/applyBindings関数|applyBindings関数]]
| |
| − | * [[Knockout.js/observable関数|observable関数]]
| |
| − | * [[Knockout.js/observableArray関数|observableArray関数]]
| |
| − | * [[Knockout.js/computed関数|computed関数]]
| |
| − | * [[Knockout.js/subscribe関数|subscribe関数]]
| |
| − | | |
| − | == 組み込みバインディング ==
| |
| − | * [[Knockout.js/可視バインディング|可視バインディング]]
| |
| − | ** [[Knockout.js/visibleバインディング|visible バインディング]]
| |
| − | ** [[Knockout.js/textバインディング|text バインディング]]
| |
| − | ** [[Knockout.js/htmlバインディング|html バインディング]]
| |
| − | ** [[Knockout.js/cssバインディング|css バインディング]]
| |
| − | ** [[Knockout.js/styleバインディング|style バインディング]]
| |
| − | ** [[Knockout.js/attrバインディング|attr バインディング]]
| |
| − | * [[Knockout.js/制御フローバインディング|制御フローバインディング]]
| |
| − | ** [[Knockout.js/foreach]]
| |
| − | ** [[Knockout.js/if]]
| |
| − | ** [[Knockout.js/ifnot]]
| |
| − | ** [[Knockout.js/with]]
| |
| − | * [[Knockout.js/操作バインディング|操作バインディング]]
| |
| − | ** [[Knockout.js/click]]
| |
| − | ** [[Knockout.js/event]]
| |
| − | ** [[Knockout.js/submit]]
| |
| − | ** [[Knockout.js/enable]]
| |
| − | ** [[Knockout.js/disable]]
| |
| − | ** [[Knockout.js/value]]
| |
| − | ** [[Knockout.js/hasfocus]]
| |
| − | ** [[Knockout.js/checked]]
| |
| − | ** [[Knockout.js/options]]
| |
| − | ** [[Knockout.js/selectedOptions]]
| |
| − | ** [[Knockout.js/uniqueName]]
| |
| − | | |
| − | === テンプレートのレンダリング ===
| |
| − | * [[Knockout.js/template]]
| |
| − | | |
| − | === 先進的なテクニック ===
| |
| − | | |
| − | === プラグイン ===
| |
| − | * [[Knockout.js/mapping]]
| |
| − | | |
| − | == 使用例 ==
| |
| − | 公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ？」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。
| |
| − | | |
| − | === 使用例1 ===
| |
| − | Knockout.jsによる[[hello, world]]のようなもの。
| |
| − | <source lang="html5">
| |
| − | <!DOCTYPE html>
| |
| − | <html lang="ja">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title>knockout.js - Test01</title>
| |
| − | <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
| |
| − | <script type="text/javascript" src="knockout-2.0.0.js"></script>
| |
| − | <script type="text/javascript">
| |
| − | jQuery(function() {
| |
| − | // ready関数
| |
| − | // knockoutjsはDOMが準備されてからじゃないと動かないよ。
| |
| − | | |
| − | // モデル
| |
| − | var AppViewModel = function() {
| |
| − | this.firstName = "Mono";
| |
| − | this.lastName = "Book";
| |
| − | };
| |
| − | // バインディング
| |
| − | 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>
| |
| − | </source>
| |
| − | | |
| − | === 使用例2 ===
| |
| − | computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref>
| |
| − | <source lang="html5">
| |
| − | <!DOCTYPE html>
| |
| − | <html lang="ja">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title>knockout.js - Test02</title>
| |
| − | <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
| |
| − | <script type="text/javascript" src="knockout-2.0.0.js"></script>
| |
| − | | |
| − | <script type="text/javascript">
| |
| − | jQuery(function() {
| |
| − | // ready関数
| |
| − | // knockoutjsはDOMが準備されてからじゃないと動かないよ。
| |
| − |
| |
| − | // モデル
| |
| − | function AppViewModel() {
| |
| − | // observable
| |
| − | this.firstName = ko.observable("Mono");
| |
| − | this.lastName = ko.observable("Book");
| |
| − | | |
| − | // computed
| |
| − | this.fullName = ko.computed(function() {
| |
| − | return this.firstName() + " " + this.lastName();
| |
| − | }, this);
| |
| − | }
| |
| − | // バインディング
| |
| − | ko.applyBindings(new AppViewModel());
| |
| − | })();
| |
| − | </script>
| |
| − | | |
| − | </head>
| |
| − | <body>
| |
| − | <!-- テキストボックス（input）を編集し、フォーカスが外れた瞬間にcomputedが走る模様。-->
| |
| − | <p>First name: <input data-bind="value: firstName" /></p>
| |
| − | <p>Last name: <input data-bind="value: lastName" /></p>
| |
| − | <p>Full name: <strong data-bind="text: fullName"></strong></p>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| | | | |
| | == 関連項目 == | | == 関連項目 == |
| | + | * [[jQuery]] |
| | * [[JavaScript]] | | * [[JavaScript]] |
| − | ** [[jQuery]]
| + | * [[ASP.NET MVC]] |
| − | ** [[Backbone.js]]
| |
| − | ** [[Knockback.js]]
| |
| | * [[ASP.NET SPA]] | | * [[ASP.NET SPA]] |
| − | * [[ASP.NET MVC]]
| |
| | | | |
| | == 参考文献 == | | == 参考文献 == |
