起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2500|回复: 2

[分享] wex5登录后渲染菜单PC端实现-分享

[复制链接]

12

主题

53

帖子

424

积分

中级会员

Rank: 3Rank: 3

积分
424
QQ
发表于 2018-7-6 10:36:18 | 显示全部楼层 |阅读模式
本帖最后由 dudemonkey 于 2018-7-6 12:58 编辑

参考了很多资料,感谢作者提供思路:1.【后台权限管理的思路

http://bbs.wex5.com/forum.php?mod=viewthread&tid=183391

2.bex5的登录模块(感觉太复杂,没必要)
3.使用iframe的方式,传统方式又感觉不符合x5 SPA思想

也实践过很多思路:
1. jsrender渲染,但是出现问题:http://bbs.wex5.com/forum.php?mod=viewthread&tid=194490&extra=  。最后渲染成功并使用jquery+iframe实现了方案。但并不满意,既然x5提供了N多组件就不该重复造轮子。

最终实现方案:
还是看了《Wex5中级教材》后,才发现wex5是对knockout.js的改造,那么使用纯knockout应该也能实现。以此为目的出发解决该问题,没想到折腾了很长时间,收获是把knockout.js了解了下

具体实现步骤:
1. Model的constructor中创建this.menus
  1. var Model = function(){
  2.      this.callParent();
  3.                
  4.      this.menus= justep.Bind.observableArray([]) ;
  5. };
复制代码
2. Model.prototype.onload方法中,ajax异步请求从后端获取树状结构菜单,这里只写出关键代码就1句:
  1. var self=this;
  2. self.menu.set(res.data); /* res.data即后端返回的list结果。*/
复制代码
此处使用set方法!我在这里折腾了2天


3. UI部分使用了knockout的模版功能,详情参见knockout官网:
ROOT节点:
  1. <ul id="resultMenuListContainer"  class="sidebar-menu" data-widget="tree" data-bind="template: { name: 'nodeTempl', foreach: menus,as:'menu' }"></ul>
复制代码
父模版:<script id="nodeTempl" type="text/html">
    <li class="treeview">
      <a href="#">
        <i class="fa fa-laptop"></i>
        <span bind-text="menu.aclName"></span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
      <!-- -->
      <ul class="treeview-menu" data-bind="template: {name: 'nodeLeafTempl', foreach: menu.subMenuList,as:'submenu' }"></ul>
        </li>
</script>

子模版:
  1. <script id="nodeLeafTempl" type="text/html">
  2.    <li><a bind-attr="{xid:submenu.aclId,name:submenu.urlPage}"  bind-text="submenu.aclName" bind-click="loadThisPage"><i class="fa fa-circle-o"></i> </a></li>
  3. </script>
复制代码
若涉及到模版循环嵌套的问题,请参考knockout.js官网提供的模版嵌套方案。我这里只有1、2级节点,比较简单。

至此页面即可渲染,并且叶子节点的bind-click也可以生效。我这里做的bind-click执行了Model.prototype.loadThisPage函数,该函数即拿到windowContainer组件,去load对应的权限菜单。









213

主题

790

帖子

2056

积分

金牌会员

Rank: 6Rank: 6

积分
2056
QQ
发表于 2018-12-13 14:32:51 | 显示全部楼层
有案例吗
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 01:47 , Processed in 0.063059 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表