Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

最新版本bug #1566

Closed
shanzhongke opened this issue Jul 6, 2016 · 22 comments
Closed

最新版本bug #1566

shanzhongke opened this issue Jul 6, 2016 · 22 comments

Comments

@shanzhongke
Copy link 

<body>
        <div ms-controller="test">
            <div ms-html="@tpl"></div>
            <button ms-click="@switch1">切换1</button>
            <button ms-click="@switch2">切换2</button>
        </div>
        <script>
            require.config({ //依赖配置
                paths: {
                    text: 'vendor/require/text.min',
                    avalon: 'vendor/avalon/avalon'
                }
            });

            require(['avalon'], function(avalon) {
                var vm = avalon.define({
                    $id: 'test',
                    tpl: "",
                    switch1: function() {
                        require(['1.js'], function(module) {
                            module.load();
                        });
                    },
                    switch2: function() {
                        require(['2.js'], function(module) {
                            module.load();
                        });
                    }
                });

                avalon.component('ms-span', {
                    template: "<span>123</span>",
                    defaults: {
                    }
                });
            });
        </script>
    </body>

1.js

define(['avalon', 'text!./123.html'], function(avalon, tpl) {
    var vm = avalon.define({
        $id: 'test2'
    });

    return {
        load: function() {
            avalon.vmodels.test.tpl = tpl;
        }
    }
});

123.html

<div ms-controller="test2">
    <xmp ms-widget="{is:'ms-span'}"></xmp>
</div>

2.js

define(['avalon', 'text!./456.html'], function(avalon, tpl) {
    var vm3 = avalon.define({
        $id: 'test3'
    });

    return {
        load: function() {
            avalon.vmodels.test.tpl = tpl;
        }
    }
});

456.html

<div ms-controller="test3">
<xmp ms-widget="{is:'ms-span'}"></xmp>
</div>
@shanzhongke
Copy link
Author

多次点击切换出现

@RubyLouvre
Copy link
Owner

不行啊，你这样会重复定义vm

@RubyLouvre
Copy link
Owner

你的vm不要放在事件里面加载

@shanzhongke
Copy link
Author

但上几个版本都没问题啊

@RubyLouvre
Copy link
Owner

不行，最开始你就违背重复定义的标准

@shanzhongke
Copy link
Author

requirejs 不是只加载了一次吗？ vm还会重复定义？

@shanzhongke
Copy link
Author

我现在单页应用就是通过url改变事件来加载不同模块的 那不同模块的vm我该写在哪？

@RubyLouvre
Copy link
Owner

1.js再拆成2个，2.js也拆成两个.

一些JS只定VM，一些JS做业务 ，一开始把所有定义VM的JS全部加载好。然后在路由的回调或点击事件中，再慢慢加载业务逻辑JS及对应的页面模板

@RubyLouvre
Copy link
Owner

不过，建议你还是用我的路由器例子改吧，ms-html加载ms-controller，我还没有想好

@RubyLouvre
Copy link
Owner

https://github.com/RubyLouvre/avalon/blob/master/perf/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6.html

@shanzhongke
Copy link
Author

1.不同模块的vm不能按需加载吗？
2.你的意思是先把这种空的vm全部加载好？之后在业务js里给vm添加业务功能？

avalon.define({
        $id: 'dataType'
})

@shanzhongke
Copy link
Author

shanzhongke commented Jul 6, 2016 •
edited

你的路由器例子是把每个单页都做成了一个组件，以后组件里必然还要嵌套小组件，感觉有点复杂，可我想的是只是加载模板，没必要把每张页面都做成组件，组件只是作为一些高复用的小部件被模板所使用

这是你以前写的例子 也是定义在模块里的

define(["avalon", "text!./aaa.html"], function(avalon, aaa) {

    avalon.templateCache.aaa = aaa
    avalon.define({
        $id: "aaa",
        username: "司徒正美"
    })
    avalon.vmodels.root.page = "aaa"

})

@RubyLouvre
Copy link
Owner

RubyLouvre commented Jul 6, 2016 •
edited 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Drag-Drop</title>
        <script src="../dist/avalon.js"></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            var v123 = heredoc(function () {
                /*
                 <div ms-controller="test2">
        <p>123</p>
                 <xmp cached="true" ms-widget="{is:'ms-span'}"></xmp>
                 </div>
                 */
            })
            var v456 = heredoc(function () {
                /*
                 <div ms-controller="test3">
         <p>456</p>
                 <xmp cached="true" ms-widget="{is:'ms-span'}"></xmp>
                 </div>
                 */
            })
        </script>
        <script>

            var vm = avalon.define({
                $id: 'test',
                tpl: "",
                switch1: function () {
                    setTimeout(function () {
                        console.log('111111')
                        avalon.vmodels.test.tpl = v123

                    })

                },
                switch2: function () {
                    setTimeout(function () {
                        console.log('sssss')
                        avalon.vmodels.test.tpl = v456

                    })

                }
            });
            var vm2 = avalon.define({
                $id: 'test2',
                ddd: 111
            });
            var vm3 = avalon.define({
                $id: 'test3',
                ddd: 222
            });
            avalon.component('ms-span', {
                template: "<span>{{@ddd}}</span>",
                defaults: {
                    ddd:'3333'
                }
            });

        </script>
    </head>
    <body ms-controller="test">
        <div ms-html="@tpl"></div>
        <button ms-click="@switch1">切换1</button>
        <button ms-click="@switch2">切换2</button>

    </body>
</html>

@RubyLouvre
Copy link
Owner

又改了改，但那个ms-html动态设置ns-controller的case 需要多少测试与调校

@RubyLouvre
Copy link
Owner 

   <xmp cached='true' ms-widget="{is:'ms-span',$id:'xxx'}"></xmp>

组件搞成这样，性能就最高了

@shanzhongke
Copy link
Author

用注释存储模板的话 自动化构建时还要特别处理下

@shanzhongke
Copy link
Author

新版本还是有问题 多次切换后点击事件依旧失效 而且vm我已经预先定义好了 这次没有动态加载vm 而且我觉得requirejs 只会动态加载一次vm 不会动态重复定义vm吧？

<body>
        <div ms-controller="test">
            <div ms-html="@tpl"></div>
            <button ms-click="@switch1">切换1</button>
            <button ms-click="@switch2">切换2</button>
        </div>
        <script>
            require.config({ //依赖配置
                paths: {
                    text: 'vendor/require/text.min'
                }
            });

                var vm = avalon.define({
                    $id: 'test',
                    tpl: "",
                    switch1: function() {
                        require(['1.js'], function(module) {
                            module.load();
                        });
                    },
                    switch2: function() {
                        require(['2.js'], function(module) {
                            module.load();
                        });
                    }
                });

                var vm1 = avalon.define({
                    $id: 'test2'
                });

                var vm2 = avalon.define({
                    $id: 'test3'
                });

                avalon.component('ms-span', {
                    template: "<span ms-click='@click'>123</span>",
                    defaults: {
                        click: function() {
                            alert(11)//多次切换后再点击 失效！！
                        }
                    }
                });
        </script>
    </body>

1.js

define(['text!./123.html'], function(tpl) {
    return {
        load: function() {
            avalon.vmodels.test.tpl = tpl;
        }
    }
});

123.html

<div ms-controller="test2">
    <xmp ms-widget="{is:'ms-span'}"></xmp>
</div>

2.js

define(['text!./456.html'], function(tpl) {
    return {
        load: function() {
            avalon.vmodels.test.tpl = tpl;
        }
    }
});

456.html

<div ms-controller="test3">
<xmp ms-widget="{is:'ms-span'}"></xmp>
</div>

@RubyLouvre
Copy link
Owner

RubyLouvre commented Jul 6, 2016 •
edited 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Drag-Drop</title>
        <script src="../dist/avalon.js"></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            var v123 = heredoc(function () {
                /*
                 <div ms-controller="test2">
        <p ms-click="@alert">123</p>
                 <xmp cached='true' ms-widget="{is:'ms-span',$id:'yyy'}"></xmp>
                 </div>
                 */
            })
            var v456 = heredoc(function () {
                /*
                 <div ms-controller="test3">
         <p ms-click="@alert">456</p>
                 <xmp cached='true' ms-widget="{is:'ms-span',$id:'xxx'}"></xmp>
                 </div>
                 */
            })
        </script>
        <script>

            var vm = avalon.define({
                $id: 'test',
                tpl: "",
                switch1: function () {
                    setTimeout(function () {
                        console.log('111111')
                        avalon.vmodels.test.tpl = v123

                    })

                },
                switch2: function () {
                    setTimeout(function () {
                        console.log('sssss')
                        avalon.vmodels.test.tpl = v456

                    })

                }
            });
            var vm2 = avalon.define({
                $id: 'test2',
                ddd: 111,
                alert: function(){
                    console.log('????')
                }
            });
            var vm3 = avalon.define({
                $id: 'test3',
                ddd: 222,
                alert: function(){
                    console.log('!!!!')
                }
            });
            avalon.component('ms-span', {
                template: "<span>{{@ddd}}</span>",
                defaults: {
                    ddd:'3333'
                }
            });

        </script>
    </head>
    <body ms-controller="test">
        <div ms-html="@tpl"></div>
        <button ms-click="@switch1">切换1</button>
        <button ms-click="@switch2">切换2</button>

    </body>
</html>

@RubyLouvre
Copy link
Owner

我试过是好的，你更新一下，看一下时间

@shanzhongke
Copy link
Author

shanzhongke commented Jul 6, 2016 •
edited

用最新版本 每个切换按钮第一次都可以 多次点击后里面组件的alert失效

    <body>
        <div ms-controller="test">
            <div ms-html="@tpl"></div>
            <button ms-click="@switch1">切换1</button>
            <button ms-click="@switch2">切换2</button>
        </div>
        <script>            
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            var v123 = heredoc(function () {
                /*
                 <div ms-controller="test2">
                 <xmp ms-widget="{is:'ms-span',$id:'xxx'}"></xmp>
                 </div>
                 */
            })
            var v456 = heredoc(function () {
                /*
                 <div ms-controller="test3">
                 <xmp ms-widget="{is:'ms-span',$id:'yyy'}"></xmp>
                 </div>
                 */
            })

                var vm = avalon.define({
                    $id: 'test',
                    tpl: "",
                    switch1: function() {
                        avalon.vmodels.test.tpl = v123
                    },
                    switch2: function() {
                        avalon.vmodels.test.tpl = v456
                    }
                });

                var vm1 = avalon.define({
                    $id: 'test2'
                });

                var vm2 = avalon.define({
                    $id: 'test3'
                });

                avalon.component('ms-span', {
                    template: "<span ms-click='@click'>123</span>",
                    defaults: {
                        click: function() {
                            alert(11)//多次切换后再点击 失效！！
                        }
                    }
                });
        </script>
    </body>

@RubyLouvre RubyLouvre reopened this Jul 6, 2016
@RubyLouvre
Copy link
Owner

加个cached＝true

@shanzhongke
Copy link
Author

终于搞定了 多谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@RubyLouvre @shanzhongke