Knockout.jsを使って簡単なタブパネルを作ってみた

ここ最近Knockout.jsを勉強してまして、その練習として簡単なものですがタブパネルを作ってみました。

Knockout.jsとは

Knockout.jsの説明は下記のエントリーに詳しく書いていますので、そちらをご参照ください。

knockout.jsでさくさくWebアプリ開発
http://ameblo.jp/ca-1pixel/entry-11298459074.html

今回作ったもの

今回作成したタブパネルは下記のような感じです。

デモ

See the Pen Tabpanel using Knockout.js by Minoru Hayakawa (@e-river) on CodePen.

今回やっていること

タブ部分のhrefの値を取得して、その取得した値を判別して該当するタブパネルが表示されます。

タブ(HTML)

タブ部分へのバインディングは以下のような感じです。

<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>

click: showBlockでhref属性の値を取得しています。また、css: { 'active': selected() == 'tab1'で取得した値がtab1の時にactiveというclassを付与します。

init() == 1は、ページが最初に表示された時に、一番目のタブがアクティブになっているようにするためのものです。そのため、またはの意味となる||ともに指定します。

タブパネル(HTML)

タブパネル部分へのバインディングは以下のような感じです。

<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>TabPanel1 Tab Panel1 Tab Panel1 Tab Panel1 Tab Panel1</p>
</div>

visible: selected() == 'tab1'は、取得した値がtab1の時に表示するためのものです。また、init() == 1は、ページが最初に表示された時に、一番目のタブパネルがアクティブになっているようにするためのものです。そのため、またはの意味となる||とともに指定します。

ソースコード

ソースコードは以下のような感じです。

HTML

JS