2014年03月15日

Knockout.jsでタブパネル2

Knockout.jsでタブパネルで気になった点を修正。



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
button.active{
font-weight:bold;
}
</style>
<div data-bind="click: tabChange">
<a href="#tab1" data-bind="css: { active: tabCheck($element) }">tab1</a>
<a href="#tab2" data-bind="css: { active: tabCheck($element) }">tab2</a>
<a href="#tab3" data-bind="css: { active: tabCheck($element) }">tab3</a>
</div>
<div>
<div id="tab1" data-bind="visible:panelCheck($element)">CSS1</div>
<div id="tab2" data-bind="visible:panelCheck($element)">CSS2</div>
<div id="tab3" data-bind="visible:panelCheck($element)">CSS3</div>
</div>
<script src="knockout-3.1.0.js"></script>
<script>
//ViewModelを定義
var tabPanelViewModel = function(){
//Model作成
this.selectTab = ko.observable("#tab1");
}
//Modelチェンジ
tabPanelViewModel.prototype.tabChange = function(o,e){
if(e.target.tagName=="A"){
this.selectTab(e.target.getAttribute("href"));
}
}
//タブチェンジ
tabPanelViewModel.prototype.tabCheck = function(e){
return this.selectTab()== e.getAttribute("href");
}
//パネルチェンジ
tabPanelViewModel.prototype.panelCheck = function(e){
return this.selectTab()=="#"+e.getAttribute("id");
}
//bindingスタート
ko.applyBindings( new tabPanelViewModel() );
</script>
</body>
</html>


clickイベントのバインドがめんどくさいのでdelegateで実装。タブやパネルの変化も別メソッドで実装することでviewの記述やメンテナンス性を向上させている。
タグ:Knockout.js
posted by ねこまんま at 11:24 | Comment(0) | TrackBack(0) | Knockout.js | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック