mmRouter：异步

{{link}}

{{log}}

<!DOCTYPE html>
<html>
    <head>
        <title>mmRouter组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="ui/ex.css">
        <script src="../avalon.js"></script>
        
        <script>
            require(["mmRouter/mmState", "loading/avalon.loading"], function() {
                var links = [],
                    user = "list.person.info",
                    address = "country.province.city.town.street.house.floor"
                var s = ["home", user, address]
                while(s.length) {
                    var tmp = s[0].split(".")
                    for(var i = 0; i < tmp.length; i++) {
                        links.push(tmp.slice(0, i + 1).join("."))
                    }
                    s.splice(0, 1)
                }
                var home = avalon.define("home", function(vm) {
                    vm.logs = []
                    vm.links = links
                })

                home.logs.$watch("length", function() {
                    document.getElementById("log").scrollTop = 100000
                })

                avalon.state.config({
                    onLoad: function(from, to) {
                        var me = to
                        if(this.currentState && this.currentState.stateName == me.stateName) {
                            loading = avalon.vmodels.loading
                            if(loading) loading.toggle = false
                        }
                        home.logs.push(me.stateName + "执行完毕")
                    }
                })

                function onEnter() {
                    var state = this.stateName,
                        loading = avalon.vmodels.loading,
                        me = this,
                        done = arguments[arguments.length - 2]
                    // 这个状态是异步，所有需要经由该状态的状态都会受影响
                    // 标记该状态是异步
                    home.logs.push(me.stateName + "正在等待中...")
                    // if(loading) loading.toggle = true
                    setTimeout(function() {
                        // 告知done
                        done && done()
                    }, 2000)
                    return false
                }

                avalon.each(links, function(index, state) {
                    var tmp = state.split(".")
                    tmp = "/" + tmp[tmp.length - 1]
                    avalon.state(state, {
                        controller: "home",
                        views: {},
                        url: tmp,
                        onAfterLoad: function() {
                        },
                        onEnter: onEnter,
                        onUpdate: function() {
                            avalon.log(arguments)
                        }
                    })
                })
                avalon.router.errorback = function() {
                    avalon.router.go("home", {}, {replace: true})
                }
                avalon.config({debug: true})
                //启动路由
                avalon.history.start({
                    basepath: "/mmRouter",
                    fireAnchor: false
                })

                avalon.scan()
            })
        </script>
    </head>
    <body ms-controller="home" 
          ms-widget="loading,loading" data-loading-type="img" data-loading-modal-background="#ccc" data-loading-modal-opacity="0.5">
        <h1>mmRouter：异步</h1>
        <div>
            <p 
               ms-repeat-link="links">
                <a 
                   ms-href="'#!/'+link.replace(/\./g,'/')">{{link}}</a>
               </p>
        </div>
        <div id="log" style="height:300px;overflow:scroll;">
            <p 
               ms-repeat-log="logs">{{log}}</p>
        </div>
        
    </body>
</html>