avalon路由

"avalon很好的mvvm框架"

Posted by ZWW on January 9, 2017

** 和ng一样。avalon的路由功能很强大也很方便,昨天晚上看了一下文档,今天抽空玩了一下 **

想到了两种方法实现,原理都是差不多的。

<body ms-controller="test">
   
    <p><a href='#!/aaa' ms-class="@className == 'aaa' ? 'ddd' : '' ">点我</a></p>
    <p><a href='#!/bbb' ms-class="@className == 'bbb' ? 'ddd' : '' ">点我</a></p>
    <p><a href='#!/ccc' ms-class="@className == 'ccc' ? 'ddd' : '' ">点我</a></p>
    <p><a href='#!/ddd/111/222' ms-class="@className == 'dj' ? 'ddd' : '' ">点我</a></p>
    <p></p>
    
</body>

vm应该这样写,就是在路由回调里面修改判断变量的值:

     var vm = avalon.define({
        $id: 'test',
        className: 'ddd',

    })
    avalon.router.add("/aaa", function (a) {
        vm.currPath = this.path;
        vm.className = "aaa";
        console.log(vm.className)
    })
    avalon.router.add("/bbb", function (a) {
        vm.currPath = this.path;
        vm.className = "bbb";
        console.log(vm.className)
    })
    avalon.router.add("/ccc", function (a) {
        vm.currPath = this.path;
        vm.className = "ccc";
        console.log(vm.className)
    })
    avalon.router.add("/ddd/:ddd/:eee", function (a) { //:ddd为参数
        vm.currPath = this.path;
        vm.className = "dj";
    })

    avalon.history.start({
        root: "/mmRouter"

    })
    avalon.scan(document.body)

    /***/
},

第二种,用ms-for遍历模板:

<p>
    <a href="" ms-for="el in @wei" ms-attr="{href: el.path}" ms-class="@curIndex===el.id&&@active"></a>
</p>

vm这样写:

        var vm = avalon.define({
        $id: 'test',
        currPath: '',
        curIndex: 'index',
        wei: [{
            name: 'home',
            path: '#!/aaa',
            id: 'index'
        }, {
            name: 'about',
            path: '#!/bbb',
            id: 'index1'
        }, {
            name: 'contact',
            path: '#!/ccc',
            id: 'index2'
        }],
        active: 'ddd'

    })
    avalon.router.add("/aaa", function (a) {
        vm.currPath = this.path;
        vm.curIndex = "index";
    })
    avalon.router.add("/bbb", function (a) {
        vm.currPath = this.path;
        vm.curIndex = "index1";
    })
    avalon.router.add("/ccc", function (a) {
        vm.currPath = this.path;
        vm.curIndex = "index2";
    })
    avalon.router.add("/ddd/:ddd/:eee", function (a) { //:ddd为参数
        vm.currPath = this.path;
        vm.curIndex = "index3";
    })

    avalon.history.start({
        root: "/mmRouter"

    })
    avalon.scan(document.body)

    /***/
}

router地址