perf/component/simplegrid.html

<!DOCTYPE html>
<html>
<head>
    <title>simplegrid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        body {
            font-family: Helvetica Neue, Arial, sans-serif;
            font-size: 14px;
            color: #444;
        }
        
        table {
            border: 2px solid #42b983;
            border-radius: 3px;
            background-color: #fff;
        }
        
        th {
            background-color: #42b983;
            color: rgba(255, 255, 255, 0.66);
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -user-select: none;
        }
        
        td {
            background-color: #f9f9f9;
        }
        
        th,
        td {
            min-width: 120px;
            padding: 10px 20px;
        }
        
        th.active {
            color: #fff;
        }
        
        th.active .arrow {
            opacity: 1;
        }
        
        .arrow {
            display: inline-block;
            vertical-align: middle;
            width: 0;
            height: 0;
            margin-left: 5px;
            opacity: 0.66;
        }
        
        .arrow.asc {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid #fff;
        }
        
        .arrow.dsc {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #fff;
        }
        
        #search {
            margin-bottom: 10px;
        }
    </style>
    <script src='../../dist/avalon.js'></script>

    <script>
        function heredoc(fn) {
            return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
            replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
        }
        avalon.component('ms-simplegrid', {
            template: heredoc(function() {
                /*
            <div>
            <table>
            <thead>
            <tr>
            <th :for="key in @columns" 
                :click="@sortBy(key)" 
                :class="{active: @sortKey == key}">
            {{key}}
            <span class="arrow" :class="@sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
            </th>
            </tr>
            </thead>
            <tbody>
            <tr :for="entry in @data | filterBy(@filter) | orderBy(@sortKey,@sortOrders[@sortKey])">
            <td :for="key in @columns">
            {{entry[key]}}
            </td>
            </tr>
            </tbody>
            </table>
            </div>
                         */
            }),
            defaults: {
                columns: [],
                data: [],
                /*	
                 duplex 无法双向同步到组件内，
                 且filterBy的this指向data item，而不是组件的vm，
                 改成传入过滤函数
                 */
                filter: avalon.noop,
                sortKey: '',
                sortOrders: {},
                sortBy: function(key) {
                    this.sortKey = key
                    this.sortOrders[key] = this.sortOrders[key] * -1
                },
                onInit: function() {
                    var sortOrders = {}
                    this.columns.forEach(function(key) {
                        sortOrders[key] = 1
                    })
                    this.sortOrders = sortOrders
                }
            }
        })

        var simplegrid = avalon.define({
            $id: 'simplegrid',
            searchQuery: '',
            gridColumns: ['name', 'power'],
            gridData: [{
                name: 'Chuck Norris',
                power: Infinity
            }, {
                name: 'Bruce Lee',
                power: 9000
            }, {
                name: 'Jackie Chan',
                power: 7000
            }, {
                name: 'Jet Li',
                power: 8000
            }],
            // 过滤函数
            searchQueryFn: function(el) {
                var kw = avalon.vmodels.simplegrid.searchQuery
                return !kw || (kw && (el.name.toLowerCase().indexOf(kw) > -1))
            }
        })
    </script>
</head>

<body>

    <!-- demo root element -->
    <div id="demo" ms-controller="simplegrid">
        <form id="search">
            Search <input name="query" :duplex="@searchQuery">
        </form>
        <ms-simplegrid :widget="{id:'grid',data:@gridData,columns:@gridColumns,filter:@searchQueryFn}">
        </ms-simplegrid>
    </div>

</body>

</html>