avalon1.5+中组件的定义方式

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
});

注意点：

1. 使用avalon.component定义组件，不再显示的定义组件的ViewModel
2. 不再额外定义组件的options和参数
3. 增加了监听子组件的初始化完成事件 $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);
	}
}

注意点：

1. 在init中修改$template的方法：

vm.$$template = function () {
    return sourceHtml;
};