avalon在1.5之后引入新的组件定义和使用方式，其总的宗旨是为了使定义和使用组件更加简单
组件库的概念
首先，需要注意的是，引入了组件库的概念（也可以理解为namespace），之后定义的组件必须指定它属于哪一个组件库。
定义方法很简单，如下：
avalon.library("wk");
上面的定义通常直接放在avalon引用的地方之下。
使用组件
然后假设我们已经有一个该库的组件button，则使用方法如下：（注意我们不再使用ms-widget的绑定了）
<wk:button a="testbutton" config="$buttonOpts"></wk:button>
可以看到，我们可以在声明的同时，直接给属性a赋值，并使用新的关键字config来指定该组件的配置项。
定义组件
直接上代码：
define(['avalon'], function(avalon) {
var _interface = function () {
}
avalon.component("wk:button", {
// VM的属性，并且同时是组件的参数
onInit: _interface,
// 下面是组件的几个特殊事件
$replace: false, // 真值时表示替换其容器
$init: function(vm, elem) {
console.log("button init");
vm.onInit.call(elem, vm);
},
$childReady: function() {
console.log("button childReady");
},
$ready: function() {
console.log("button ready");
},
$dispose: function(vm. elem) {
elem.innerHTML = elem.textContent = ""
console.log("button dispose");
},
$template: "<button type='button'>{{a}} <ms:text></ms:text></button>"
});
return avalon; // 最后必须返回avalon
});
注意点：
- 使用
avalon.component定义组件，不再显示的定义组件的ViewModel - 不再额外定义组件的options和参数
- 增加了监听子组件的初始化完成事件
$childReady
例子， 下面示例pager组件的新的方式定义
模板（注：和之前的定义方式相比，没有任何更改）
<div class="row">
<div class="col-md-5 col-sm-12" style="margin: 10px 0;" ms-if='showPagingInfo'>
<span>第<span style="color: #b70c5e"> {{currentIndex}} / {{totalPage}} </span>页，
每页显示<span style="color: #b70c5e"> {{pageSize}} </span>条记录，
共搜索出<span style="color: #b70c5e"> {{totalCount}} </span>条记录</span>
</div>
<div class="col-md-7 col-sm-12">
<nav style="float: right;">
<ul class="pagination pagination-sm" style="margin:5px 0;">
<li ref="1"><a ms-click="jumpToFirst" href="javascript:;">首页</a></li>
<li ms-class='active: el === currentIndex' ms-repeat='pageIndexs'><a href="javascript:;" ms-click='jump(el)'>{{el}}</a></li>
<li ref="2"><a ms-click="jumpToLast" href="javascript:;">尾页</a></li>
</ul>
</nav>
</div>
</div>
组件代码：
define(['avalon',
'text!components/pager.html'
], function(avalon, sourceHtml) {
var _interface = function() {};
avalon.component("wk:pager", {
showPagingInfo: true,
pageSize: 10,
//分页信息
currentIndex: 1,
totalPage: 1,
totalCount: 1,
pageIndexs: [],
// 事件
onInit: _interface,
onPageChanged: _interface,
// 方法
doInit: _interface,
jump: _interface,
jumpToFirst: _interface,
jumpToLast: _interface,
$replace: true, // 真值时表示替换其容器
$init: function(vm, elem) {
vm.jump = function(toIndex) {
console.log(toIndex);
vm.onPageChanged.call(elem, toIndex);
vm.currentIndex = toIndex;
};
vm.jumpToFirst = function() {
vm.jump(1);
};
vm.jumpToLast = function() {
vm.jump(vm.totalPage);
};
// 初始化方法
vm.doInit = function (pageIndex, pageCount, totalCount, pageSize) {
vm.currentIndex = pageIndex;
vm.totalPage = pageCount;
vm.totalCount = totalCount;
vm.pageSize = pageSize || options.pageSize;
vm.pageIndexs.clear();
for(var i = 1; i <= vm.totalPage; i++){
vm.pageIndexs.push(i);
}
};
vm.onInit.call(elem, vm);
},
$childReady: function() {
},
$ready: function() {
},
$dispose: function(vm, elem) {
elem.innerHTML = elem.textContent = "";
},
$template: sourceHtml
});
return avalon;
});
使用
<wk:pager config="$pagerOpts"></wk:pager>
//在VM中：
$pagerOpts:{
onInit: function (vm) {
vm.doInit(2, 10, 100, 10);
},
onPageChanged: function (index) {
console.log("changed to page " + index);
}
}
注意点：
- 在init中修改$template的方法：
vm.$$template = function () {
return sourceHtml;
};