1.原型设计
1.1 AvalonJs原型
var vm = avalon.define({
$id: 'xxxxCtrl',
version: '1.0',
xxxxCollection:{
data: [
{ value:'value1' },{ value:'value2' },{ value:'value3' }
],
count: 3
OnClick: function(){
var self = vm.xxxxCollection;
},
Init: function(){
}
}
});
avalon.scan(document.body);
<div ms-controller="xxxxCtrl">
<h2 ms-text="version"><h2>
<ul>
<li ms-repeat-item1="xxxxCollection.data" ms-text="item1.value"><li>
</ul>
</div>
1.1 AngularJs原型
$scope.vm = {
version: '1.0',
xxxxCollection:{
data: [
{ value:'value1' },{ value:'value2' },{ value:'value3' }
],
count: 3
OnClick: function(){
var self = vm.xxxxCollection;
},
Init: function(){
}
}
};
<div>
<h2 ng-bind="vm.version"><h2>
<ul>
<li ms-repeat="item1 in vm.xxxxCollection.data" ng-bind="item1.value"><li>
</ul>
</div>
2. 命名规则和语法
- 所有字符串必须使用单引号
- 属性必须以小写开头，并以驼峰式命名法，例：
isPass、name
- 方法必须以大写开头，并以驼峰式命名法，例：
OnClickSave、OnSearch
- vm对象集合必须以
Collection结尾，元素内部必须使用data、count初始化。例：xxxxCollection
3. 参考资料
4. 练习
- 按以上规则对比AngularJS和AvalonJs常用属性和方法,例如：
- 显示、隐藏
- if绑定
- 双向绑定
- repeat循环
- 下拉列表的绑定
- attribute绑定
- class绑定
- style绑定
- href绑定
- src绑定
- 常用事件绑定
...
