Avalon-数据填充

最新推荐文章于 2023-09-27 20:29:02 发布

原创最新推荐文章于 2023-09-27 20:29:02 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#avalon #数据填充

JavaScript 同时被 2 个专栏收录

52 篇文章

订阅专栏

avalon

4 篇文章

订阅专栏

本文详细介绍了Avalon框架中的数据填充技术，包括{{}}的使用规则，如何避免样式闪动，禁止插值表达式定义标签属性，以及ms-text、ms-html、ms-value的用法和过滤器的应用，特别是自定义过滤器的测试实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2 数据填充

2.1 {{}}里可以定义本文属性，{{}}里的内容会被ms-controller等vm内的对应属性值替换。

但是注意：不可以为avalon对象单独增加属性。

       <div class="container">
		<div class="row">
			<div class="col-md-12" ms-controller="first">
				<p class="text-muted">{{name}}:{{color}}</p>
				<div class="col-md-12" ms-controller="second">
					<p class="text-primary">{{name}}:{{color}}</p>
					<div class="col-md-12" ms-controller="fourth">
						<p class="text-danger">{{name}}:{{color}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>

avalon.define({
		$id:'first',
		name:'my first demo',
		color:'as you like'
	});
	avalon.define({
		$id:'second',
		name:'test nest',
		color:'i like purple'
	});
var controller=avalon.define({
		$id:'fourth',
		name:'test ms-skip',
	});
	controller.color='it will not appear in my page';
	avalon.scan();
	console.log(controller);

2.2 避免{{}}在avalon未扫描完define时出现，可以在页面中定义一个

.ms-controller{

visibility:hidden;

}

为添加了插值表达式的标签添加该样式，当scan（）完成后会自动移除该样式，避免了样式闪动。

2.3 不能用插值表达式定义标签属性

2.4 {{prop|html}}，其中，html可以是元素节点或者NodeList

可以在html代表的元素节点内插入prop文本，再插入DOM中。

2.5 修改插值表达式界定符{{}}

2.6 ms-text

2.7 ms-html

测试2.6, 2.7

       <div class="container">
		<div class="row">
			<div class="col-md-12" ms-controller="prop">
				<p class="text-muted" ms-text="content"></p>
				<p class="text-muted" ms-html="content"></p>
			</div>
		</div>
	</div>

        avalon.define({
		$id:'prop',
		content:'<h1>test ms-text and ms-html</h1>'
	});
	avalon.scan();

2.8 ms-value

        <div class="input-group" ms-controller="value">
		<input type="text" class="form-control" ms-value="content">
		<input type="text" class="form-control" ms-value="test {{content+' !'}}">
	</div>

       avalon.define({
		$id:'value',
		content:'ms-value'
	});
	avalon.scan();

2.9 过滤器

测试2.9 自定义过滤器

<div class="page-header">
		<div>{{'Cynthia'|findName}}</div>
	</div>

avalon.define({
		$id:'value',
		content:'ms-value'
	});
	avalon.scan();
avalon.filters.findName=function(str){
	return {
		'Cynthia':'李岳阳',
		'Viki':'静'
	}[str];
};