Giter VIP home page Giter VIP logo

Comments (25)

RubyLouvre avatar RubyLouvre commented on May 30, 2024 1 
<!DOCTYPE html>
<html>

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./dist/avalon.js"></script>

</head>

<body>
    <script>
        function heredoc(fn) {
            return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
            replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
        }
        var treeCaches = {}
        var tree = avalon.component('tree', {
            template: heredoc(function() {
                /*
                <div class="tree-node" ms-click='@click' ms-class="@cls" ms-css="{'text-indent': @level * 30}">
                <p>第{{@level}}层</p>
                <div ms-for="(index,el) in @children">
                   <wbr is="tree" ms-widget="[el, {level: @level+1, pid: @sid, pos:index}]" />
                </div>
                </div>
                */
            }),
            defaults: {
                sid: 0,
                pid: 0,
                level: 0,
                pos: 0,
                children: [],
                cls: '',
                click: function() {
                    var vm = this
                    var parentVm = treeCaches[vm.pid]
                    if(parentVm){
                        parentVm.cls = new Date - 0
                    }
                },
                onReady: function(e) {
                   var vm = e.vmodel
                   vm.sid = vm.sid == 0 ? Math.random() : vm.sid
                   treeCaches[vm.sid] = vm
                   console.log(treeCaches)
               }
            }
        })
        var vm = avalon.define({
            $id: 'test',
            options: {
                sid: 'top',
                pid: null,
                level: 0,
                cls: 'open',
                pos: 0,
                children: [{
                    children: [{
                        children: [
                            {children:[]}
                        ]
                    }]
                }, {
                    children: [{
                        children: []
                    }]
                }, {
                    children: [{
                        children: []
                    }]
                }]
            }
            
        })
    </script>
    <style>
        .tree-node {

        }
    </style>
    <div ms-controller="test">
        <wbr is="tree" ms-widget="@options" />
    </div>
</body>

</html>

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024

大家看这个主结构与模板里面的结构

就是最上面的ms-each-el="xxx"的值不一样
因此是完美的递归

想操作，最完美的情况就是绑定一个点击事件到树的根部，然后让它冒泡
在事件源对象上找$vmodel就行了

from avalon.

Gaubee avatar Gaubee commented on May 30, 2024

数据能否动态？动态的添加子树？

from avalon.

ztzcom avatar ztzcom commented on May 30, 2024

可以通过event.target.$vmodel 获取事件目标对象的vm了？
0.91 版本还是没有拿到vm。

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

ms-visible="el.subtree.length" 据我们这里的使用者反馈是不行的,必须要用 ms-visible="el.subtree.length>0" 这样才行

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024 
  <script type="avalon" id="tmpl">
            <ul ms-each-el="el.subtree">
            <li>{{el.text}}<div ms-include="'tmpl'" ms-visible="el.subtree.length" ></div></li>
            </ul>
        </script>

最新版应该改成这样

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

才看到上面这个comment, 要注意上面的这个<ul ms-each-el="el.subtree">

from avalon.

peichao01 avatar peichao01 commented on May 30, 2024

绑定树的根部，怎么才能在click之后知道当前的 li 是对应的 tree[0].subtree[1] 这个数据呢？

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@peichao01 每一个item可以持有自己的数据,你可以直接把需要访问的数据放在这个item里吧

from avalon.

peichao01 avatar peichao01 commented on May 30, 2024

@zhangchunlin 有具体完整的代码演示吗 :)

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@peichao01 我之前在uliweb做的一个工具里用过,你可以看看
https://github.com/zhangchunlin/scancopyright/blob/master/apps/Scan/templates/index.html

from avalon.

VaJoy avatar VaJoy commented on May 30, 2024

挺屌的例子，我收藏了

from avalon.

z893495246 avatar z893495246 commented on May 30, 2024

@RubyLouvre 大哥，帮忙看下我这到底是啥原因啊，好几天了，找不到解决办法#1053 (comment)

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024

这个问原作者;或者看原来的例子

from avalon.

liudianpeng avatar liudianpeng commented on May 30, 2024

如果例子中的text是text1,text2,text3,text4......这样的父节点怎么办??

from avalon.

mylyh avatar mylyh commented on May 30, 2024

每一层树的展开, 收缩要怎么写? 点击箭头才展开下一个子集

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@mylyh 参考我的例子: https://github.com/zhangchunlin/scancopyright/blob/master/apps/Scan/templates/index.html#L127

from avalon.

mylyh avatar mylyh commented on May 30, 2024

@zhangchunlin
我这个是同步加载的, 主要是想改变箭头的方向, 和显示隐藏子集, 但是改变了el.expand 的值, 应该不会刷新列表吧, 好像只有改变数组的Length才可以更新视图.....

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@mylyh 看我上面有类似于

<div ms-include="'tmpl'" ms-visible="el.cnum>0&&el.open" ></div>

这样的处理, 这样的话只要改变 el.open属性就行了吧

from avalon.

mylyh avatar mylyh commented on May 30, 2024

@zhangchunlin
不行, 直接改数组属性没反应的, 开始渲染是可以, 但是点击改变不会更新
其实avalon可以搞个angular的apply方法, 手动 用模型驱动视图更新

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@mylyh 会不会跟版本有关系?
我的例子依赖于plugs内置的avalon, https://github.com/limodou/plugs/tree/master/plugs/ui/avalon/static/avalon ,plugs里最高目前是 1.4.7.1

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024

明天我研究一下

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024

avalon2,就是将模板放到vm上

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../dist/avalon.js"></script>
        <script>
            avalon.define({
                $id: "tree",
                tree:[
                    {text: "aaa", subtree: [
                            {text: 1111, subtree: []},
                            {text: 2222, subtree: [
                                    {text: 777, subtree: []}
                                ]},
                            {text: 3333, subtree: [
                                    {text: 8888, subtree: []},
                                    {text: 999, subtree: []}
                                ]}
                        ]},
                    {text: "bbb", subtree: [
                            {text: 4444, subtree: []},
                            {text: 5555, subtree: []},
                            {text: 6666, subtree: []}
                        ]},
                    {text: "ccc", subtree: []},
                    {text: "ddd", subtree: []},
                    {text: "eee", subtree: []},
                    {text: "fff", subtree: []}
                ],
                tmpl: "<ul ms-for='el in el.subtree'><li>{{el.text}}<div ms-html='@tmpl' ms-visible='el.subtree.length'>xxx</div></li></ul>",

            })


        </script>
    </head>
    <body ms-controller="tree">
        <ul ms-for="el in @tree">
            <li>{{el.text}}<div ms-html="@tmpl" ms-visible="el.subtree.length" ></div></li>
        </ul>
    </body>
</html>

from avalon.

RubyLouvre avatar RubyLouvre commented on May 30, 2024

加上点击事件

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../dist/avalon.js"></script>
        <script>
            avalon.define({
                $id: "tree",
                tree:[
                    {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: 999, 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: []}
                ],
                tmpl: "<ul ms-for='el in el.subtree'><li ms-click='el.open = !el.open'>{{el.text}}<div ms-html='@tmpl' ms-visible='el.subtree.length && el.open'>xxx</div></li></ul>",

            })


        </script>
    </head>
    <body ms-controller="tree">
        <ul ms-for="el in @tree">
            <li ms-click="el.open = !el.open">{{el.text}}<div ms-html="@tmpl" ms-visible="el.subtree.length && el.open" ></div></li>
        </ul>
    </body>
</html>

from avalon.

zhangchunlin avatar zhangchunlin commented on May 30, 2024

@RubyLouvre avalon2是不是这个就不支持鸟? 因为 ms-include 木有了.

from avalon.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.