「Knockout.js」を編集中
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
1行目: | 1行目: | ||
− | '''Knockout | + | '''Knockout'''(のっくあうと)とは、[[MVVM]]パターンで[[UI]]([[HTML]])を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。 |
− | + | Knockoutのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockoutは[[MVVM]]なので別物だと思うがどうなんだろう? | |
− | + | Knockoutは[[ASP.NET MVC]]や[[jQuery]]の中の人が中心となって作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっている。 | |
− | + | なお、Knockoutは[[ASP.NET MVC]]や[[jQuery]]が無くても単体で使える。現実的な話では少なくとも[[jQuery]]はあった方がいいが。 | |
− | 2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]] | + | 2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。[[Knockout]]は[[Twitter Bootstrap]]、[[PHP]]とあわせstrict教の信者には受け入れがたいと言われている。 |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== 使用例 == | == 使用例 == | ||
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。 | 公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。 | ||
− | + | knockoutjsによる[[hello, world]]のようなもの。 | |
− | |||
<source lang="html5"> | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
62行目: | 17行目: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
− | <title> | + | <title>Knockoutjs - Test01</title> |
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> | <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" src="knockout-2.0.0.js"></script> | ||
87行目: | 42行目: | ||
</source> | </source> | ||
− | |||
computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref> | computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref> | ||
<source lang="html5"> | <source lang="html5"> | ||
94行目: | 48行目: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
− | <title> | + | <title>Knockoutjs - Test01</title> |
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> | <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" src="knockout-2.0.0.js"></script> | ||
− | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
// ready関数 | // ready関数 | ||
// knockoutjsはDOMが準備されてからじゃないと動かないよ。 | // knockoutjsはDOMが準備されてからじゃないと動かないよ。 | ||
− | + | ||
// モデル | // モデル | ||
− | function | + | var AppViewModel = function() { |
// observable | // observable | ||
this.firstName = ko.observable("Mono"); | this.firstName = ko.observable("Mono"); | ||
113行目: | 66行目: | ||
return this.firstName() + " " + this.lastName(); | return this.firstName() + " " + this.lastName(); | ||
}, this); | }, this); | ||
− | } | + | |
+ | this.capitalizeLastName = function() { | ||
+ | var currentVal = this.lastName(); | ||
+ | this.lastName(currentVal.toUpperCase()); | ||
+ | }; | ||
+ | }; | ||
// バインディング | // バインディング | ||
ko.applyBindings(new AppViewModel()); | ko.applyBindings(new AppViewModel()); | ||
− | } | + | }); |
</script> | </script> | ||
− | |||
</head> | </head> | ||
<body> | <body> | ||
− | + | <p>First name: <strong data-bind="text: firstName"></strong></p> | |
− | <p>First name: < | + | <p>Last name : <strong data-bind="text: lastName"></strong></p> |
− | <p>Last name: | + | <p>Full name : <strong data-bind="text: fullName"></strong></p> |
− | <p>Full name: | + | |
+ | <button data−bind="click: capitalizeLastName">Go caps</button> | ||
+ | |||
</body> | </body> | ||
</html> | </html> | ||
130行目: | 89行目: | ||
== 関連項目 == | == 関連項目 == | ||
+ | * [[jQuery]] | ||
* [[JavaScript]] | * [[JavaScript]] | ||
− | + | * [[ASP.NET MVC]] | |
− | |||
− | |||
* [[ASP.NET SPA]] | * [[ASP.NET SPA]] | ||
− | |||
== 参考文献 == | == 参考文献 == |