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

转载于:https://www.cnblogs.com/le0zh/p/avalon-component.html