Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

knockoutの基礎知識

More than 5 years have passed since last update.
この記事は、knockout.js Advent Calendar 2015の1日目の記事です。
knockout , knockout-es5 , knockout.punches環境を想定しています。

knockout

knockout.js は、MV*系のライブラリです。そのなかでもMVVM(Model View ViewModel)という分類になります。

knockoutは基本的にフレームワーク(特にフルスタックフレームワーク)ではありません。あくまでライブラリです。
その為、フレームワーク独特の文化・世界観にどっぷりつかる必要はなく、任意の他のライブラリとの連携が比較的楽なメリットがあります。
逆にデメリットとしては、MVVMの仕組み以外の機能(例えば、SPAなどで用いられるクライアントサイドのWebRoutingの仕組みなど)は提供されていません。 完全に路線(レール)を引いてほしい場合には、AureliaやAngular2などを利用するのがいいでしょう。

knockoutは2way-bindingの仕組みを提供しているので、
 とあるModelの
 とあるPropertyの変更を検知し、
 その変更をもとに、
  即座または任意の遅延後に、
   他のプロパティを変化させたり、
   Viewを更新したり出来ます。

実際のサンプルを見てみましょう。


knockout標準記法でのサンプル

index.html
あなたの名前は?:<input type="text" data-bind="value:myName">

<div>こんにちは!<span data-bind="text:myName"></span>さん</div>
<div>このページの滞在時間は、<span data-bind="text:age"></span>秒です</div>
script.js
var vm = {
    myName: ko.observable("山田"),
    age: ko.observable(1)
}
setInterval(function(){
    vm.age( vm.age()+1 );
},1000);
ko.applyBindings(vm);

ko.applyBindings(vm)は、ViewとViewModelの紐づけです
この例では、
  ユーザの名前 をView→ViewModelへbindingしていて、
  滞在時間を ViewModel→Viewへbindingされているのが確認できます。

knockoutの構文拡張

ただ、ちょっと書き方が古臭い とか 面倒だ とか感じるあなたは現代っ子な感覚の持ち主でしょう(いい意味で)。
それもそのはずで、knocckoutは 悪名高き IE6にも対応するために、モダンな記法を標準では採用していません。

しかし、そんな古代のブラウザをサポートする必要がない、またはそもそもIEではなく、ChromeやFirefoxもしくはスマホなどのモダンブラウザのみにターゲットを絞れる場合には、どんどんモダンな記法を採用して行きたいです。

そこで、標準のknockoutを次の2つで拡張します。

  • knockout.punches (knockoutの構文の構文糖衣(SyntaxSugar)を提供)
  • knockout-es5 (ECMAScript5を使用したObjectのPropertyのGetter Seterをknockoutのobservaleとして利用する仕組みを提供)

先ほどのサンプルに、拡張した仕組みを適用すると このように すっきりします。

あなたの名前は?:<input type="text" data-bind="value:myName">

<div>こんにちは!{{myName}}さん</div>
<div>このページの滞在時間は、{{age}}秒です</div>
script.js
var vm = {
    myName: "山田",
    age: 1
};
setInterval(function(){
    vm.age++
},1000);

ko.track(vm);
ko.punches.enableAll();
ko.applyBindings(vm);

新たに追加された2行について、

 ko.punches.enableAll()は、
   knockout.punchesで追加されるあらゆる構文糖衣を有効にし、
 ko.track(vm)は、
   knockout-es5により追加されるもので、vmのもつプロパティを監視対象に追加する(≒各プロパティをobservable()でマッピング)
といったものです。

(各ライブラリは、自前のサーバで提供するか、 CDNとして提供されているものを利用するようにしてください。 JsFiddleのサンプルで用いているような rawgithub.com への直リンでの本番運用は禁止されています。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away