avalon2學習教程08插入移除操做

時間 2019-11-10

標籤 avalon2 avalon 學習教程插入移除简体版

原文原文鏈接

本節介紹的ms-if指令與ms-visible很類似，都是讓某元素「看不見」，不一樣的是ms-visible是經過CSS實現，ms-if是經過移除插入節點實現。html

ms-if的用法與1.×時別無二致，只要值是真，就插入，爲假時，就在原位置上替換爲一個註釋節點作佔位符。oop

注意：在avalon1.*中，存在一個叫ms-if-loop的輔助指令，這個在2.0移除了，這個直接使用filterBy過濾器就能實現類似功能。ui

<!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從新作一下切換卡吧spa

<!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>