今天的主角是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值，然后还原。

  1. "visible": function(data, vmodels) {
  2.     var elem = avalon(data.element)
  3.     var display = elem.css("display")
  4.     if (display === "none") {
  5.         var style = elem[0].style
  6.         var visibility = elem.css("visibility")
  7.         style.display = ""
  8.         style.visibility = "visible"
  9.         data.display = elem.css("display")
  10.         style.visibility = visibility
  11.     } else {
  12.         data.display = display
  13.     }
  14.     parseExprProxy(data.value, vmodels, data)
  15. },

先来一个直观的例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.         <script >
  9.             var model = avalon.define({
  10.                 $id: "test",
  11.                 toggle: false,
  12.                 array:[1,2,3,4]
  13.             })
  14.             setTimeout(function() {
  15.                 model.toggle = true
  16.             }, 3000)
  17.  
  18.         </script>
  19.         <style>
  20.             table{
  21.                 width:300px;
  22.                 border-collapse: collapse;
  23.                 border:1px solid red;
  24.             }
  25.             td {
  26.                 padding:5px;
  27.                 border:1px solid red;
  28.             }
  29.             .menu{
  30.                 display:inline-block;
  31.                 *display:inline;
  32.                 *zoom:1;
  33.                 width:140px;
  34.                 padding:5px 20px;
  35.                 text-align: center;
  36.                 margin-left:1em;
  37.                 border: 1px solid greenyellow;
  38.             }
  39.             .btn{
  40.                 padding:5px 20px;
  41.                 margin-left:1em;
  42.                 display: inline-block;
  43.             }
  44.         </style>
  45.     </head>
  46.     <body ms-controller="test" >
  47.         <table ms-visible="toggle" border="1" >
  48.             <tr><td>1111</td><td>1111</td></tr>
  49.             <tr><td>1111</td><td>1111</td></tr>
  50.         </table>
  51.         <br/>
  52.         <table border="1" >
  53.             <tr><td ms-visible="toggle">test</td><td>2222</td></tr>
  54.             <tr><td>2222</td><td>2222</td></tr>
  55.         </table>
  56.           <table border="1" >
  57.             <tr ms-repeat="array"><td ms-visible="toggle">{{el}}</td><td ms-visible="toggle">{{el+10}}</td></tr>
  58.         </table>
  59.         <div style="display:none" class="menu" ms-visible="toggle">item</div>  <div style="display:none" class="menu" ms-visible="toggle">item</div>
  60.         <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>
  61.         <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>
  62.     </body>
  63. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.         <script >
  9.             var model = avalon.define({
  10.                 $id: "test",
  11.                 num:5
  12.             })
  13.         </script>
  14.  
  15.     </head>
  16.     <body ms-controller="test" >
  17.         <div ms-visible="10 - num > 0">{{num}}</div>
  18.         <input data-duplex-event="change" ms-duplex="num">
  19.     </body>
  20. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.         <script >
  9.             var model = avalon.define({
  10.                 $id: "test",
  11.                 currentIndex: 0,
  12.                 toggle: function(index) {
  13.                     model.currentIndex = index
  14.                 }
  15.             })
  16.         </script>
  17.         <style>
  18.             button{
  19.                 width:150px;
  20.                 height:30px;
  21.                 line-height: 30px;
  22.                 text-align: center;
  23.             }
  24.             .ms-tabs{
  25.                 border:1px solid violet;
  26.                 width: 430px;
  27.                 padding:5px;
  28.                 height: 200px;
  29.             }
  30.         </style>
  31.  
  32.     </head>
  33.     <body ms-controller="test" >
  34.         <button ms-click="toggle(0)">触发器1</button>
  35.         <button ms-click="toggle(1)">触发器2</button>
  36.         <button ms-click="toggle(2)" >触发器3</button>
  37.         <div class="ms-tabs" ms-visible="currentIndex === 0">切换卡1<br/>其他内容</div>
  38.         <div class="ms-tabs" ms-visible="currentIndex === 1">切换卡2<br/>及司徒正美</div>
  39.         <div class="ms-tabs" ms-visible="currentIndex === 2">切换卡3<br/>最后一个了</div>
  40.     </body>
  41. </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. Python - learn note(1)

    1. 下载安装Python 2.7(为了向下兼容以前的版本), Python 3.5(VS2015不支持配置3.6的环境) 教程 需要使用VS2015进行开发,必须勾选上后面两项: 2. VS2015 ...

  2. MYeclipes项目导入导出

    导入: 右键,import,

  3. npm 与 package.json 快速入门

    npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本文你将了解: 什么是 npm 安装 npm 更新 npm ...

  4. LaTeX 之 \label 的运用

    LaTeX 之 \label 的运用 前言 大部分的LaTex教程里面都会提到 \label 的标记功能,而如果入门时就玩耍过WinEdt的同学在工具栏上点击各种环境的时候就会发现\label这个东东 ...

  5. 新转移注意(caffe):ImportError: libcudart.so.7.0: cannot open shared object file: No such file or directory

    https://github.com/NVIDIA/DIGITS/issues/8 For this error ImportError: libcudart.so.7.0: cannot open ...

  6. vim自动缩进

    最近写完程序,在进行调试时发现特别困难,代码乱的一塌糊涂,特别是代码量很多时,调试起来特别囧,逻辑很难理清. 这让我想起了缩进功能,可以让代码自动对齐. gedit编辑器在菜单栏里的编辑->首选 ...

  7. .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型

    .NET 中提供了很多判断某个类型或实例是某个类的子类或某个接口的实现类的方法,然而这事情一旦牵扯到泛型就没那么省心了. 本文将提供判断泛型接口实现或泛型类型子类的方法. 本文内容 .NET 中没有自 ...

  8. POI2013题解

    POI2013题解 只做了BZ上有的\(13\)道题. 就这样还扔了两道神仙构造和一道计算几何题.所以只剩下十道题了. [BZOJ3414][Poi2013]Inspector 肯定是先二分答案,然后 ...

  9. test20181019 B君的第一题

    题意 分析 考场做法同标解. 画图模拟分析发现,无论操作顺序怎样,操作数的奇偶性是不变的. 所以等同求出,以每点为根的操作数奇偶性. 用\(f(x)\)表示x及其子树中的边,包括x到它fa的边,将他们 ...

  10. C Socket编程之Connect超时 (转)

    网络编程中socket的分量我想大家都很清楚了,socket也就是套接口,在套接口编程中,提到超时的概念,我们一下子就能想到3个:发送超时,接收超时,以及select超时(注:select函数并不是只 ...