今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，比如用户之前是让此LI元素表示inline-block，实现水平菜单效果，你直接display:block就会撑破布局。因此元素之前是用什么样式显示，需要保存下来，当表达式转换为真值时再还原。

这里说一些技术内幕。很早以前，我迷恋HTML5的一些新特性，使用一个叫hidden的新元素属性，但发现它的优先级太低了，最终放弃。也尝试使用过一个“display:none!important”的类名实现隐藏，不过如果元素本来就是隐藏，我就无法实现显示了，因此也放弃了。

再说，想再得元素在没隐藏的样式也没有这么轻松，我们首先判断它是否display:none，否就可以立即保存当前display值，是就先通过另一种方式隐藏它，将元素的display置为空字符串，取得display值，然后还原。

"visible": function(data, vmodels) {

    var elem = avalon(data.element)

    var display = elem.css("display")

    if (display === "none") {

        var style = elem[0].style

        var visibility = elem.css("visibility")

        style.display = ""

        style.visibility = "visible"

        data.display = elem.css("display")

        style.visibility = visibility

    } else {

        data.display = display

    }

    parseExprProxy(data.value, vmodels, data)

},

先来一个直观的例子：

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js"></script>

        <script >

            var model = avalon.define({

                $id: "test",

                toggle: false,

                array:[1,2,3,4]

            })

            setTimeout(function() {

                model.toggle = true

            }, 3000)

        </script>

        <style>

            table{

                width:300px;

                border-collapse: collapse;

                border:1px solid red;

            }

            td {

                padding:5px;

                border:1px solid red;

            }

            .menu{

                display:inline-block;

                *display:inline;

                *zoom:1;

                width:140px;

                padding:5px 20px;

                text-align: center;

                margin-left:1em;

                border: 1px solid greenyellow;

            }

            .btn{

                padding:5px 20px;

                margin-left:1em;

                display: inline-block;

            }

        </style>

    </head>

    <body ms-controller="test" >

        <table ms-visible="toggle" border="1" >

            <tr><td>1111</td><td>1111</td></tr>

            <tr><td>1111</td><td>1111</td></tr>

        </table>

        <br/>

        <table border="1" >

            <tr><td ms-visible="toggle">test</td><td>2222</td></tr>

            <tr><td>2222</td><td>2222</td></tr>

        </table>

          <table border="1" >

            <tr ms-repeat="array"><td ms-visible="toggle">{{el}}</td><td ms-visible="toggle">{{el+10}}</td></tr>

        </table>

        <div style="display:none" class="menu" ms-visible="toggle">item</div>  <div style="display:none" class="menu" ms-visible="toggle">item</div>

        <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>

        <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>

    </body>

</html>

上面提到表达式，是指属性值可以存在加减乘除运算与函数。我们再看以下例子：

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js"></script>

        <script >

            var model = avalon.define({

                $id: "test",

                num:5

            })

        </script>

    </head>

    <body ms-controller="test" >

        <div ms-visible="10 - num > 0">{{num}}</div>

        <input data-duplex-event="change" ms-duplex="num">

    </body>

</html>

最后我们做一个实用的例子——切换卡——来结束本章节吧。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js"></script>

        <script >

            var model = avalon.define({

                $id: "test",

                currentIndex: 0,

                toggle: function(index) {

                    model.currentIndex = index

                }

            })

        </script>

        <style>

            button{

                width:150px;

                height:30px;

                line-height: 30px;

                text-align: center;

            }

            .ms-tabs{

                border:1px solid violet;

                width: 430px;

                padding:5px;

                height: 200px;

            }

        </style>

    </head>

    <body ms-controller="test" >

        <button ms-click="toggle(0)">触发器1</button>

        <button ms-click="toggle(1)">触发器2</button>

        <button ms-click="toggle(2)" >触发器3</button>

        <div class="ms-tabs" ms-visible="currentIndex === 0">切换卡1<br/>其他内容</div>

        <div class="ms-tabs" ms-visible="currentIndex === 1">切换卡2<br/>及司徒正美</div>

        <div class="ms-tabs" ms-visible="currentIndex === 2">切换卡3<br/>最后一个了</div>

    </body>

</html>

迷你MVVM框架 avalonjs 学习教程5、显示隐藏控制的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  2. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  3. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  4. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  5. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  6. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  7. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  8. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  9. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

随机推荐

  1. BZOJ2620 [Usaco2012 Mar]Haybale Restacking

    恩,非常好的题...至少思路非常巧妙 首先可以得到性质:对于相邻的两堆A & B,A给B然后B再给A是完全没有意义的...也就是说只能单向传递 然后我们记下每个点要给(被给)多少堆干草a[i] ...

  2. [转]Ubuntu默认root用户密码

    Ubuntu默认root用户密码 在试验的过程中,安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下. 到网上搜了一下,原来是这么回事:Ubuntu的默认root密码 ...

  3. LINUX中的RCU机制的分析

    RCU机制是Linux2.6之后提供的一种数据一致性访问的机制,从RCU(read-copy-update)的名称上看,我们就能对他的实现机制有一个大概的了解,在修改数据的时候,首先需要读取数据,然后 ...

  4. keras_基本网络层结构(2)_卷积层

    参考文献:http://keras-cn.readthedocs.io/en/latest/layers/convolutional_layer/ 卷积层 Conv1D层 keras.layers.c ...

  5. 使用Junit进行Java单元测试

    1.新建一个Number类,该类中包含两个函数,求和.求差 2.在eclipse上安装Junit 右键test工程,选择“Properties”→“Java Build Path”→“Librarie ...

  6. 取出表A中第31到第40记录

    方法一: select top 10 * from A where RowId not in (select top 10 RowId from A) 方法二(使用临时表): with tempTab ...

  7. BZOJ5090: [Lydsy1711月赛]组题（01分数规划）

    5090: [Lydsy1711月赛]组题 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 785  Solved: 186[Submit][Status ...

  8. rabbitmq学习（三）：rabbitmq之扇形交换机、主题交换机

    前言 上篇我们学习了rabbitmq的作用以及直连交换机的代码实现,这篇我们继续看如何用代码实现扇形交换机和主题交换机 一.扇形交换机 1.生产者 /** * 生产者 */ public class ...

  9. python的继承顺序

    python的继承顺序 python 创建类时分为新式类和旧式类 class A: # 经典类 def __init__(self): pass # 新类,可以在这里加 __metaclass__ = ...

  10. 【传输协议】http协议GET与POST传递数据的最大长度能够达到多少

    各种web开发语言中,各个页面之间基本都会进行数据的传递,web开发里面比较常用的数据传递方式有get post,一直以来我都只知道get传递的数据量要比post传递的数据量要少,所以传递大数据量还是 ...