当前位置：文江博客话题详情

Avalon Component

用avalon2如何更优雅的实现vue的这个例子

发布于 2022-09-03 14:27:52 字数 212 浏览 17 评论 0

存在问题：

输入框和组件之间的数据如何交互（duplex变量似乎无法直接同步到组件内）
filterBy的用法是否恰当

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

情独悲 2022-09-10 14:27:52

使用filterBy方法，传入过滤方法与传参。


<!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="lib/avalon2.js"></script>
        <script>
            avalon.ready(function(){    
                
                avalon.component('ms-simplegrid',{    
                    template: document.getElementById('grid-template').innerHTML,
                    defaults: {    
                        columns: null,
                        data: null,
                        /*    
                            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',
                    search: '',
                    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,index, kw){    
                        return !kw || (kw && (el.name.toLowerCase().indexOf(kw) > -1))
                    }
                })
                
                avalon.scan(document.body)
                
            })
            
        </script>
    </head>

    <body>
    <!-- component template -->
    <script type="text/x-template" id="grid-template">
      <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,@search) | orderBy(@sortKey,@sortOrders[@sortKey])">
            <td :for="key in @columns">
              {{entry[key]}}
            </td>
          </tr>
        </tbody>
      </table>
      </div>
    </script>

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

    </body>
</html>

怪我闹别瞎闹 2022-09-10 14:27:52

已改成传入filter函数了

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文