文档章节

【MVVM】- Avalon 基础入门案例

ZeroneLove
 ZeroneLove
发布于 02/28 08:45
字数 802
阅读 14
收藏 0

Avalon

国产前端大神司徒正美借鉴knockout和angularJS的基础上开发的mvvm框架,avalon相比knockout和angularJS在运行效率和设备适配上面具有更大的优势,同时具备以上两种框架的部分特点

avalon控制器作用域

与angualrJS的作用域相似,距离标签最近声明的控制器即为该元素的最终作用控制器,如果存在控制器嵌套,标签可以直接获取外部包裹的控制器的属性,但是最近的控制器不能与外部控制器的属性或者方法名一致, 否则会被最近的控制器的属性和方法覆盖(最近的控制器的优先级更高)

外观界面

<div ms-controller="AAAA">
userName:<span>{{aaaa}}</span>
</div>

<br><br>
<div ms-controller="BBBB">
	<div>
	password:<span>{{bbbb}}</span>
	</div>
	<div ms-controller="CCCC">
	CCCC:<span>{{cccc :bbbb}}</span>
	</div>
	<div ms-important="DDDD">
	DDDD:<span>{{dddd}}:{{cccc}}</span><br>
	<!-- 注意,如果将model的字符串进行连接,important失效:cccc元素数据可以正常显示 -->
	EEEE:<span>{{dddd:cccc}}</span>
	</div>
</div>

<div ms-skip="FFFF">
FFFF:<span>{{ffff}}</span>
</div>

js操作逻辑

//ms-controller:指定作用域,首先查找定义的controler,如果找不到则向上一级查找
//ms-important不会向上查找
//ms-skip表示avalon不会扫描该元素,作用域下的指令失效
avalon.ready(function(){
	avalon.define({
		$id:"AAAA",
		aaaa:"aaaa"
	});
	avalon.define({
		$id:"BBBB",
		bbbb:"bbbb"
	});
	
	avalon.define({
		$id:"CCCC",
		cccc:"cccc"
	});
	
	avalon.define({
		$id:"DDDD",
		dddd:"dddd"
	});
	
	avalon.define({
		$id:"FFFF",
		ffff:"ffff"
	});
	
	//scan方法是扫描html文档,将html绑定的属性、数据和作用域转换为avalon处理
	avalon.scan();
});

效果:

avalon与主流的mvvm框架对比


Avalon html元素绑定入门

界面

<form ms-controller="test">
<h3>属性绑定</h3>
<!-- 根据t1的值决定是否添加属性:ms-attr-属性名 -->
<label>姓名</label><input ms-duplex="textModel" ms-attr-disabled="t1"><br>
<!-- 如果t1为true,则绑定readonly属性 -->
<label>年龄</label><input ms-duplex="age" ms-attr-readonly="t1"><br>

<label>性别</label>
<div>
<!-- 通过sex和value值进行判断,如果一致则选中 -->
<input type="radio" ms-duplex-string="sex" value="男">男<br>
<input type="radio" ms-duplex-string="sex" value="女">女<br>
</div><br><br>

<!-- 默认选项 -->
工作:<br>
<select>
<option value="IT">IT</option>
<option value="销售" ms-attr-selected="t2">销售</option>
<option value="产品">产品</option>
</select><br>

球类运动:<br>
<input type="checkbox" value="option1" ms-attr-checked="t3">篮球<br>
<input type="checkbox" value="option2" ms-attr-checked="t3">羽毛球<br>
<input type="checkbox" value="option3" >足球<br><br>

<a ms-href="path">baidu</a><br>
<a ms-attr-id="id" ms-attr-name="name" ms-href="{{path}}/city/chongqing">百度网</a><br>
<img ms-src="src" ms-attr-title="title" width="200px" height="200px"/>
</form>

js操作逻辑

avalon.ready(function(){
	/*
	*avalon属性绑定操作;
	类名操作:ms-class
	表单value属性操作:ms-duplex
	元素固有和自定义属性:ms-attr  
	ms-href  ms-src:类似ms-text绑定属性
	*/
	var vm=avalon.define({
		$id:"test",
		textModel:"star",
		t1:true,
		age:20,
		sex:"男",
		t2:true,
		t3:true,
		path:"http://www.baidu.com",
		id:"123456",
		name:"zhangsan",
		src:"d:\NN.jpg",
		title:"bbb"
	});
	avalon.scan();
});

效果:

分析:

  • ms-controller:控制器,主要是确定控制器的作用范围
  • vm=avalon.define({......}):定义控制器的内容(属性和方法)

© 著作权归作者所有

ZeroneLove
粉丝 6
博文 164
码字总数 133695
作品 0
深圳
高级程序员
私信 提问
【MVVM】- Avalon 常用指令用法

Avalon 常用指令 ms-visible、ms-if ms-visible:样式改变display:block ms-if 性能更高,若页面不显示则注释标记, ms-if 还做其他的逻辑控制 css样式 外观 js操作逻辑 效果: ms-duplex 双向...

ZeroneLove
02/28
21
0
【MVVM】- Avalon 过滤器

ms-controlle作用:当页面事先加载而页面并未完全渲染完成时自动隐藏目标显示域,待数据完全显示时avalon会自动取消样式,达到遮挡初始静态页面的显示效果 css样式 界面 js操作逻辑 效果:...

ZeroneLove
02/28
1
0
【MVVM】- Avalon 数组操作

avalon 对象、对象数组、数组基本操作 界面 js操作逻辑 效果: avalon 数组升、降序 界面 js代码逻辑 效果: 数组成员元素动态创建 界面 js代码逻辑 效果:

ZeroneLove
02/28
7
0
【MVVM】- Avalon验证器duplexHooks

avalon验证器: 主要用来限定某些元素的格式输入 界面 Javascript操作代码: 效果图:

ZeroneLove
02/28
6
0
【MVVM】- AngularJS基础学习

Angular JS ---- AngularJS 基础入门案例 外观页面 AngularJS 模块 模块是应用控制器的容器,Angularjs代码依赖Jquery,在使用angualrjs代码时,Jquery脚本文件须在AngularJS脚本之前加载,此...

ZeroneLove
02/27
32
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部