javascript - avalon2 组件在ie8下的兼容性-PHP中文网问答

问题：avalon2开发的组件在ie8下不可用
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>AvalonTest</title>
    <style>
        body{font-size:14px;font-family:"黑体"}
        .grid .gridview{height:20em}
        .grid .gridview table{width:100%;text-align:center;border-collapse:collapse}
        .grid .gridview table tr.th{background:#ccc;height:2em}
        .grid .gridview table tr.tb{border-bottom:dashed 1px #ccc}
        .grid .gridview table tr.tb td.number{text-align:right}
        .grid .pager{width:100%;background:#e7e7e7}
        .grid .pager span{margin-right:.5em;padding:.2em}
        .grid .pager span.value{display:inline-block;*display:inline;*zoom:1;margin:0;width:2em}
        .grid .pager a{margin-left:.5em;padding:.2em 0;color:#22d;cursor:pointer}
        .grid .pager a.first{margin-left:2em}
        .grid .pager input{margin-left:.5em;width:5em}
        .btn{width:20em}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.16/avalon.js"></script>
</head>
<body ms-controller="app">
    <p class="header">
        <h1>Avalon2 Learning</h1>
        <p ms-text="@p"></p>
    </p>
    <p ms-important="lev-pages" class="pages">
        <p class="page page-test1">
            <button class="btn" ms-click="@getDataSource()">查询</button>
            <xmp ms-widget="[{is:'ms-grid',id:'grid1',onPageChanged:@onGridPageChanged,getDataSource:@getDataSource},@config]">
                <p class="gridview">
                    <table>
                        <tr class="th"><td ms-for="(i,c) in @columns">{{c}}</td></tr>
                        <tr class="tb" ms-for="(i,r) in @datasource"><td ms-for="(i,c) in r" ms-class="typeof(c)==='number' && 'number'">{{r[i]}}</td></tr>
                    </table>
                </p>
            </xmp>
        </p>
        <p class="page page-test2">
        </p>
    </p>
    <script>
        var app = avalon.define({
            $id: 'app',
            p: 'avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。'
        });
        avalon.component('ms-grid', {
            template: '<p class="grid"><slot name="table"></slot><p class="pager"><span class="value">{{@pageIndex}}</span>/<span class="value">{{@totalPage}}</span>共<span class="value">{{@totalCount}}</span>条记录<a class="first" ms-click="@gotoPage(1)">首页</a><a ms-click="@gotoPage(@pageIndex-1)">上一页</a><a ms-click="@gotoPage(@pageIndex+1)">下一页</a><a ms-click="@gotoPage(@totalPage)">末页</a><input type="text" ms-text="@pageIndex"><a>Go</a></p></p>',
            defaults: {
                table: '',
                pageIndex: 0,
                pageSize: 20,
                totalPage: 0,
                totalCount: 0,
                gotoPage: function (i) {
                    if (i < 1 || i > this.totalPage) {
                        console.log('超出范围');
                        return;
                    }
                    this.pageIndex = i;
                    this.onPageChanged({ pageIndex: this.pageIndex, totalPage: this.totalPage });
                },
                onPageChanged: function (e) {

                },
                getDataSource: function () {

                },
                onInit: function (e) {

                },
                onReady: function (e) {

                },
            },
            soleSlot: 'table'
        });
        var service = {
            columns: ['id', 'name', 'age', 'sex', 'addr'],
            data: [
                [{ id: 1, name: 'dhz', age: 20, sex: '男', addr: '广州' }],
                [{ id: 2, name: 'levan', age: 25, sex: '男', addr: '广州' }],
                [{ id: 3, name: 'ddd', age: 20, sex: '女', addr: '广州' }],
                [{ id: 4, name: 'lll', age: 25, sex: '女', addr: '广州' }],
            ]
        };
        var vmLevPages = avalon.define({
            $id: 'lev-pages',
            datasource: [],
            columns: [],
            onGridPageChanged: function (e) {
                vmLevPages.datasource = service.data[e.pageIndex - 1];
                vmLevPages.config.pageIndex = e.pageIndex;
                vmLevPages.config.totalCount = service.data.length;
            },
            getDataSource: function () {
                vmLevPages.datasource = service.data[0];
                vmLevPages.columns = service.columns;
                vmLevPages.config.pageIndex = 1;
                vmLevPages.config.pageSize = 1;
                vmLevPages.config.totalPage = service.data.length;
                vmLevPages.config.totalCount = service.data.length;
            },
            config: {
                pageIndex: 1,
                pageSize: 1,
                totalPage: 0,
                totalCount: 0,
                columns: service.columns,
                onInit: function (e) {
                },
                onReady: function (e) {
                }
            }
        });
    </script>
</body>
</html>
在ie8下ms-controller不能嵌套，在ms-controller下嵌套ms-important是可以的。
@司徒正美