一歩一歩avalonコンポーネント05を作成する:ツリーコンポーネント

木のコンポーネントは非常に恐ろしいコンポーネントで、超複雑で、超書きにくいという印象があります.しかしavalon 2を使ってやるのは簡単なことです.まずスタイルから、無秩序なリストは天然に利用可能なツリー構造であり、いくつかのUL要素が組み合わされていると、自然にインデント問題を処理します.すなわち、UL要素をツリーのノードとして使用すると、ツリーコンポーネントの内部にもツリーコンポーネントが存在し、再帰構造を形成する必要がある.avalon 2のslotメカニズムがまた登場する時だ.
だから私たちの木の構造はたぶん

また、ツリーには折り畳みサブツリーの機能もあり、ms-visibleを使用して隠し表示サブツリーを実現します.ms−clickによりms−visibleパラメータを伝達する.

    
        
        
        
    
    
        

            

                
            
            
                function heredoc(fn) {
                    return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                            replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
                }
                var treeID = 0
                avalon.component('tree', {
                    template: heredoc(function () {
                        /*
                         <ul>
                         <li ms-for="(index, el) in @tree | get(0)">{{el.text}}
                         <span ms-click='@openSubTree(el)' ms-text="@changeIcon(el)"></span>
                         <div ms-visible="el.open" ms-html="@renderSubTree(el)">
                         
                         </div>
                         </li>
                         </ul>
                         */
                    }),
                    defaults: {
                        tree: [],
                        renderSubTree: function (el) {
                            return  el.subtree.length ? '<wbr ms-widget="{is:"tree", $id:"tree_' + (++treeID) + '", tree: el.subtree}" />' : ''
                        },
                        openSubTree: function (el) {
                            el.open = !el.open
                        },
                        changeIcon: function (el) {
                            return el.open && el.subtree.length ? '[-]' : '[+]'
                        }
                    }
                })


                avalon.define({
                    $id: "tree",
                    data: [
                        {text: "aaa", open: 1, subtree: [
                                {text: 1111, open: 1, subtree: []},
                                {text: 2222, open: 1, subtree: [
                                        {text: 777, open: 1, subtree: []}
                                    ]},
                                {text: 3333, open: 1, subtree: [
                                        {text: 8888, open: 1, subtree: []},
                                        {text: 9999, open: 1, subtree: [
                                                {text: '    ', open: 1, subtree: []}
                                            ]}
                                    ]}
                            ]},
                        {text: "bbb", open: 1, subtree: [
                                {text: 4444, open: 1, subtree: []},
                                {text: 5555, open: 1, subtree: []},
                                {text: 6666, open: 1, subtree: []}
                            ]},
                        {text: "ccc", open: 1, subtree: []},
                        {text: "ddd", open: 1, subtree: []},
                        {text: "eee", open: 1, subtree: [
                                {text: 1234, open: 1, subtree: []}
                            ]},
                        {text: "fff", open: 1, subtree: []}
                    ]

                })
            
        


    

ほら、私たちの木のコンポーネントが一気に出てきて、とても地味に見えますが、確かに木です.デザイナーを探して美化して、きれいなICONを追加すれば、完全にztreeに違いありません.もちろんztreeのアイコンもコピーできます.最も重要なのは、コードが少なすぎて、メンテナンスが超便利です.