2013-11-14 1st

README

#Knockout.jsで開閉する階層リスト

Knockout.jsで開閉する階層リストを作りました。

jsdoit.css

@charset "UTF-8";
h1{
    font-size : 15pt;
    font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul{
    font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    li {
        cursor : pointer;
    }
}

jsdoit.html

<h1>
    Knockout.jsで開閉する階層リスト
</h1>
<!-- リストのルート -->
<ul data-bind="template: { name: 'nodeTmpl', foreach: root.nodes }"></ul>

<!-- ノードのテンプレート -->
<script id="nodeTmpl" type="text/html">
    <li data-bind="visible : state, click : $root.open,  clickBubble: false">
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'nodeTmpl', foreach: nodes }"></ul>
    </li>
</script>

jsdoit.js

/**
    ノードのモデル
**/
var Node = function(name, nodes, depth) {
   //ノードの名前
   this.name = ko.observable(name);
   //他のノード
   this.nodes = ko.observableArray(nodes);
   //ノードの深さ
   this.depth = depth;    
   //開いているか閉じているか
   this.state = ko.observable(false);
};

/**
    ノードを格納するビューモデル
**/
function viewModel(){
    var self = this;
    
    //ツリーに表示するノード
    self.root = new Node("root", [
        new Node("Android", [
            new Node("Panasonic",[],3),
            new Node("Sony", [
                new Node("Xperia",[],3),
                new Node("Xperia HD",[],3)
            ],2)
        ],1).state(true), 
        new Node("iOS", [
            new Node("iPhone",[],2),
            new Node("iPad",[],2)
        ],1).state(true)    
    ],0).state(true);
    
    //閉じたり開いたりする関数
    self.open = function(place){
        console.log(place.name());
        
        for(var i = 0; i < place.nodes().length; i++){
            var state = place.nodes()[i].state();
            place.nodes()[i].state(!state);
        }
    };
    
    return {
        root : self.root,
        open : self.open
    };
}
    
/**
    バインディングの実行
**/
ko.applyBindings(new viewModel());