avalon2学习教程08插入移除操作

本节介绍的ms-if指令与ms-visible很相似,都是让某元素“看不见”,不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现。

ms-if的用法与1.×时别无二致,只要值是真,就插入,为假时,就在原位置上替换为一个注释节点做占位符。

注意1: 在avalon1.*中,存在一个叫ms-if-loop的辅助指令,这个在2.0移除了,这个直接使用filterBy过滤器就能实现相似功能。

注意2: 在avalon1.*中,ms-if的优选级是高于ms-repeat循环指令,到avalon2.0,则反过来,ms-for比较高。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-if</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./dist/avalon.js" ></script>
        <script>
            var vmodel = avalon.define({
                $id: "test",
                object: {}
            })

            setTimeout(function() {
                vmodel.object = {id: "132", message: "显示!!"}
            }, 3000)

            setTimeout(function() {
                vmodel.object = {}
            }, 5000)

        </script>
 </head>
    <body>
        <div ms-controller="test" >
            这是比较输出结果:{{@object.id != null}}
            <div ms-visible="@object.id != null">
                这是visible的:
                <span>{{@object.message}}</span>
 </div>
            <div ms-if="@object.id != null">
                这是if的:
                <span>{{@object.message}}</span>
 </div>
        </div>
 </body>
</html>

现在我们用ms-if重新做一下切换卡吧

<!DOCTYPE html>
<html>
    <head>
        <title>ms-if</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./dist/avalon.js"></script>
        <script >
            var vm = avalon.define({
                $id: "test",
                curIndex: 0, //默认显示第一个
                buttons: ['aaa', 'bbb', 'ccc'],
                panels: ["<div>面板1</div>", "<p>面板2</p>", "<strong>面板3</strong>"]
            })

        </script>
 <style>
 button{
 margin:1em 3em;
 }
 .panel div{
 height:200px;
 background: #a9ea00;
 }
 .panel p{
 height:200px;
 background: green;
 }
 .panel strong{
 display:block;
 width:100%;
 height:200px;
 background: #999;
 }
 </style>
    </head>
 <body ms-controller="test" >
 <div>
 <button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button>
        </div>
 <div class='panel' ms-for='(jj, el) in @panels' ms-if='jj === @curIndex' ms-html='el'></div>
    </body>
</html>

你可能感兴趣的:(avalon2学习教程08插入移除操作)