avalonjs 中的if else实现的几种方法
在学习avalonjs的过程中,发现模板中并没有if else这样的写法,不像tempalte ejs这些,所以总结了三种方法来实现,仅供在使用avalonjs的同学参考,主要是通过ms-if 表达式和方法来实现.
1.开始前的准备
首先是做一个简单的html作为基础
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test"> </div>
</body>
</html>
一些简单的样式
.text1{
color: #f33;
} .text2{
color: #33f;
} .text3{
color: #3f3;
}
简单的avalonjs 例子初始化,其中的type就是我们要用来做判断的
var vm = avalon.define({
$id: "test",
type:1
});
2.使用ms-if的方式
最直接的就是avalonjs的绑定ms-if,只是这里却没有ms-else这样的绑定,应该是处于dom的结构考虑,所以才没有这样的绑定器吧.那么实现的方法其实也很简单,两个ms-if就可以实现了,也就是写两个div,在不同的情况下做不同的显示即可,在html中就可以实现了.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test">
<div class="text1" ms-if="type==0">if 的内容</div>
<div class="text1" ms-if="type!=0">else 的内容</div> </div>
</body>
</html>
3.使用表达式
mvvm的框架都会支持表达式的,avalonjs不例外,实现的方式就是在"{{}}"里面写入表达式进行判断,通过三元运算符来进行判断,现在回过头来想,avalonjs做得还是很强大的.既然是在"{{}}"里面写,那么在html就可以实现了.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test">
<div class="text1" ms-if="type==0">if 的内容</div>
<div class="text1" ms-if="type!=0">else 的内容</div> <div class="text2">
{{type==0?'if 的内容':'else 的内容'}}
</div>
</div>
</body>
</html>
4.在模型中定义方法
一般的情况用前面两种方法应该都没有多大问题,如果是遇到一些复杂的判断,就需要这种方法了,就是在模型中自定义一个方法来处理,这个方法应该称为通用的方法吧,里面就有很多发挥的空间.
自定义一个方法来处理,问题就简单了很多,毕竟在js里面做判断还是很容易的事情的,比如if else \表达式\switch ,这些都可以用上,到时候只要return 内容回去就可以了,那么这个需要html和js来共同完成.
html的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://avalonjs.github.io/static/script/avalon.js"></script>
<title>avalon的if else</title>
</head>
<body>
<div ms-controller="test">
<div class="text1" ms-if="type==0">if 的内容</div>
<div class="text1" ms-if="type!=0">else 的内容</div> <div class="text2">
{{type==0?'if 的内容':'else 的内容'}}
</div> <div class="text3">
{{toHtml(type)}}
</div>
</div>
</body>
js的代码如下:
var vm = avalon.define({
$id: "test",
type:1,
toHtml: function(type){
if(type===0){
return "if 的内容";
}else{
return "else 的内容";
}
}
});
5.结束语
像avalonjs这样的框架,有时候看起来限制了用法,其实换一个角度了看却是变得更加灵活了,上面介绍的方法希望能给学习avalonjs的同学一些启发和参考.
上面的例子,写在了runjs里面http://runjs.cn/detail/uibw2aio.本文同步发表在我的个人博客,http://www.subying.com/archives/144.html .
avalonjs 中的if else实现的几种方法的更多相关文章
- linux中快速清空文件内容的几种方法
这篇文章主要介绍了linux中快速清空文件内容的几种方法,需要的朋友可以参考下 $ : > filename $ > filename $ echo "" > f ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- Java 获取*.properties配置文件中的内容 ,常见的两种方法
import java.io.InputStream; import java.util.Enumeration; import java.util.List; import java.util.Pr ...
- Python中模拟enum枚举类型的5种方法分享
这篇文章主要介绍了Python中模拟enum枚举类型的5种方法分享,本文直接给出实现代码,需要的朋友可以参考下 以下几种方法来模拟enum:(感觉方法一简单实用) 复制代码代码如下: # way1 ...
- Java中取小数点后两位(四种方法)
摘自http://irobot.iteye.com/blog/285537 Java中取小数点后两位(四种方法) 一 Long是长整型,怎么有小数,是double吧 java.text.D ...
- android中退出当前应用程序的四种方法
android中退出当前应用程序的四种方法 [IT168 技术]Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何 ...
- JAVA中获取文件MD5值的四种方法
JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...
- 在Java Web程序中使用监听器可以通过以下两种方法
之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...
- linux中删除文件内空白行的几种方法。
linux中删除文件内空白行的几种方法 有时你可能需要在 Linux 中删除某个文件中的空行.如果是的,你可以使用下面方法中的其中一个.有很多方法可以做到,但我在这里只是列举一些简单的方法. 你可能已 ...
随机推荐
- java 路径的问题
在项目开发中会碰到各种各样的获取项目路径的一些问题: 1:java项目: 以获取 类路径下的mess.properties 为例来说明: 文件在项目中的位置: src/bz/beppe/demo/r ...
- mysql创建账号及管理权限
mysql创建账号及管理权限 0.mysql版本8.0.15,服务器版本:RHEL 6.5 1.创建用户名密码 mysql> use mysql; mysql> create user ' ...
- 移动一根火柴使等式成立js版本(递归)
修改成递归版本 思路: 1.设定规则数组,比如:1加一根火柴只可以变成7. 2.设定方法数组,比如:一个数增加了一根火柴,其他的数必然减少一根火柴. 3.增加Array方法,由元素名和方法,得到规则对 ...
- D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)
上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家 ...
- Windows平台下搭建自己的Git服务器
该文章转自:http://www.codeceo.com/article/windows-git-server.html Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库,相 ...
- OS之内存管理 --- 虚拟内存管理(二)
关于虚拟内存管理之前的请看:OS之内存管理 - 虚拟内存管理(一) 帧分配 每个进程对的最小帧数是由操作系统的体系结构决定的,但是最大帧数是由可用物理内存的数量决定的.所以在这之间,对于进程的帧的分配 ...
- 一口一口吃掉Hexo(五)
如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 通过前四节的内容,相信你已经能够在你的虚拟主机上成功部署网站,并且能够通过你自己的域名访问你的网站了,接下来要做的就是日 ...
- 转:Intellij idea Version Control File Status Colors ( 版本控制文件状态颜色 )
https://blog.csdn.net/Bruce_Lee__/article/details/80261308 Added —— 添加 Added in not active changelis ...
- 一次Linux服务器被入侵和删除木马程序的经历
转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wzlinux.blog.51cto.com/8021085/1740113 一.背景 晚上看到有台服 ...
- Restful API 设计参考原则
在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...