avalon视频学习笔记（二）

时间：2015-04-25 13:32:55 阅读：182 评论：0 收藏：0 [点我收藏+]

标签：

一、数据填充

含义：将数据打印到页面上，通过绑定属性，将页面变成动态模版

1、插值表达式 {{prop}}，{{prop | html}}定界符及自动配置

含义：{{prop}}是对某一文本节点的nodeValue进行修改，因此不会影响兄弟节点，{{prop}}只是表示这个地方可以被替换，在avalon中，它只在文本节点中有效，它不能替换属性节点里的名字，特性节点的名字必须以ms-开头。

a、｛｛prop｝｝

<head>
	<meta charset="UTF-8">
	<title>avalon-prop</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script>
		avalon.ready(function  () {
			avalon.define({
				$id:"test",
				word:"Hello avalon"
			})
			avalon.scan();
		})
	</script>
</head>
<body>
	<div ms-controller="test">
		{{word}}
	</div>
</body>

*在avalon还没没有加载完成，但是html文件已经绚烂完毕，导致｛｛word｝｝暴漏，应该怎么处理？

<style>
.ms-controller{
 visibility:hidden;
}
</style>

引用样式，可以正常显示。

*插值表达式，是不可设置元素属性的。

b、｛｛porp | html｝｝对加载的值进行过滤。

c、修改插值表达式界定符

当｛｛｝｝双尖括号被占用时，就可以通过修改config方法，进行修改。建议界定符的长度大于1，不要设置为<<>>这样的位操作符。比如在DOMReady之前，调用如下语句：

avalon.config({
 interpolate:["[","]"]
})

<head>
	<meta charset="UTF-8">
	<title>avalon-prop</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script>
		avalon.config({
			interpolate:["[[","]]"]
		})
		avalon.ready(function  () {
			avalon.define({
				$id:"test",
				word:"Hello avalon"
			})
			avalon.scan();
		})
	</script>
</head>
<body>
	<div ms-controller="test">
		[[word]]
	</div>
</body>

2、绑定属性 ms-text，ms-html，ms-value

a、ms-test

含义：ms-text是文本绑定属性，会清空元元素的内部再进行内部填充。ms-text其实就是{{prop}}的真身，框架内部都是走同一处理函数，ms-text作为一个绑定属性，必须附于元素节点之上，因此没有前者那么方便

<head>
	<meta charset="UTF-8">
	<title>avalon-prop</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script>
		avalon.ready(function  () {
			avalon.define({
				$id:"test",
				word:"Hello avalon"
			})
			avalon.scan();
		})
	</script>
</head>
<body>
	<div ms-controller="test" ms-text="word"></div>
</body>

b、ms-html

含义:ms-html是html绑定属性，会清空原元素的内部，再进行内部填充。ms-html其实就是{{ porp | html }}的真身，框架内部都是走同一处理函数，ms-html作为一个绑定属性，必须附于元素节点之上，因此没有前者那么方便。

<head>
	<meta charset="UTF-8">
	<title>avalon-prop</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script>
		avalon.ready(function  () {
			avalon.define({
				$id:"test",
				word:"<p>Hello avalon<p>"
			})
			avalon.define({
				$id:"test2",
				word:"<p>Hello avalon</p>"
			})
			avalon.scan();
		})
	</script>
</head>
<body>
	<div ms-controller="test" ms-text="word"></div>
	<div ms-controller="test2" ms-html="word"></div>
</body>
</html>

两者的区别就是:

text会将存储的字符串，当成text文本原样输出。

html会将存储的字符串，当成html文本元素输出。

c、绑定属性ms-value

含义：用过ms-value指令，数据能通过表单元素的value值显示出来。ms-value为了应对复杂的显示，也支持插值表达式，但里面不能用过滤器。

<head>
	<meta charset="UTF-8">
	<title>avalon-prop2</title>
	<script type="text/javascript" src="../avalon.min.js"></script>
	<script type="text/javascript">
	avalon.ready(function  () {
		avalon.define({
			$id:"text",
			text:‘111‘
		})
		avalon.scan();
	})
	</script>
</head>
<body>
	<div ms-controller="text">
		<input type="text" ms-value="text">
		<textarea name="" id="" cols="30" rows="10" ms-value="xxx{{text+‘!!!‘}}yyy"></textarea>
	</div>
</body>

3、过滤器 html、uppercase、lowercase、truncate、camelize、escape、currency、number、date多过滤器协同工作，自定义过滤器

来自为知笔记(Wiz)

avalon视频学习笔记（二）

标签：

原文地址：http://www.cnblogs.com/Zjingwen/p/4455734.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行