程序员 2014-11-1 每日奇妙之旅
发布于 4个月前 作者 leogiese 1247 次浏览 来自 分享

原文 http://forjs.org/book/xyfULqrrXg/section/g19V1ou1vx

程序员 2014-11-1 一天的奇妙之旅

推荐:《精通Node.js开发》 《Angular.js视频详解》

加作者QQ 1405491181 探讨coder如何踏上奇妙之旅!

前几天思考一些有趣的挑战,并且做了一定的调整,感觉自己成长了许多。还是继续我的奇妙之旅!

项目的需要,我要用reactjs开发一个tree components,开始想考虑用angular工具,前几天的思考后,我考虑到项目本身的特殊性, 决定采用reactjs来做mvc的V部分,这并不是说angular不好。世界上没有银弹,没有绝对好绝对坏的技术, 我发现爱上一个技术是很危险的,工具而已,在特定 context 要用特定的东西,钳子扳子各有用途。

选择技术是根据特定项目而言,所以应该不断学习任何新生的框架、技术和理念,学习不是为了用它,正所谓 艺多不压身,也许你在遇到某个挑战时,就会用上,所以不要迷信一种方式,而是要放开思路,接受更多的经验谈。 当你的眼睛看到不一样的理念时,你不要马上排斥,而是要接受它,收入囊中。

阴阳理论,所有坏的也有好的,好的当中一定也有坏的,重要的是要看用它的人,有个人问达摩:空即使色 色即是空 是不是就是说无好无坏无我无他全无无之空也。 然后达摩用拳头打了那个人,那个人马上说:为何打我!! 达摩曰:既然一切都空 你为何知道痛呢?接着达摩阐述了禅学之根本,他说:看那看不到的,听那听不到的声音才是根本。 这句话的意思是:不断的学习新的事物,并且看到背后的本质。

论道也就这样了,下面还是开发吧:

开发Tree元件

先看看最终结果

首先要安装3个依赖库

jspm install tree-node=npm:tree-node  --save

jspm install react=npm:react --save

jspm install react-bootstrap=github:react-bootstrap/react-bootstrap-bower

安装好后就可以正式开发了,先创建渲染的UI结构:

    render() {

        var id = this.state.model.id;

        return (
            <li className={this.isOpen(id) ? "open-node" : "close-node"}>
                <h4 data-node-id={id} onClick={this.clickNode}>
                    <Glyphicon data-node-id={id} id={id} onClick={this.onoff} glyph={this.isOpen(id) ? "minus" : "plus"} />
                 <span data-node-id={id} id={id} onDoubleClick={this.onoff} onClick={this.select}>{this.state.model.data("label")}</span>
                </h4>
                {this.renderChild()}
            </li>
        )
    }

最终形成下面的html结构

ul
  li
    h4
    ul
  li
    h4
    ul

先这样,之后还要更改和优化。

渲染子节点!

    renderChild() {

        var childs = [], parent = this.state.model;
        parent.childIds.forEach((cid)=> {
            var child = parent.getNode(cid);
            childs.push(new TreeNode({
                model: child,
                selectHandle: this.select,
                command: this.props.command
            }));
        })

        return (
            <ul>
            {childs}
            </ul>
        )
    }

我们用一个页面测试一下

Promise.all([
    System.import("./build/TreeNode"),
    System.import("react"),
    System.import("tree-node")]).then(function (lib) {

    var Tree = lib[0];
    var React = lib[1];
    var TreeNode = lib[2];

    var tree = new TreeNode;

    var n1 = new TreeNode;
    var n2 = new TreeNode;
    var n3 = new TreeNode;
    var n4 = new TreeNode;

    n1.data("label", "leo");
    n2.data("label", "giese");
    n3.data("label", "nnn333")
    n4.data("label", "n4444")

    tree.appendChild(n1).appendChild(n2);

    n2.appendChild(n3);
    n2.appendChild(n4);

    var option = {model:tree.json,command:{}}

    React.render(new Tree(option), document.querySelector("#tree1"));
    React.render(new Tree(option), document.querySelector("#tree2"));
})

<div id="tree1" style="float:left"></div>
<div id="tree2" style="float:left"></div>

出现了下面的效果:

看起来不美观,并且收不回去,修改一下代码,并加入一个央视,看来起萌萌的就更好了!


.tree {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree ul {
    list-style: none;
    margin-left: 1em;
    padding: 0;
}

.tree li > h4 span:first-child:after {
    padding:5px;

}

.tree li.open-node > ul{
    display:block;
}

.tree li.close-node > ul{
    display:none;
}

最终效果是

回到顶部