|
本帖最后由 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
- var Model = function(){
- this.callParent();
-
- this.menus= justep.Bind.observableArray([]) ;
- };
复制代码 2. Model.prototype.onload方法中,ajax异步请求从后端获取树状结构菜单,这里只写出关键代码就1句:
- var self=this;
- self.menu.set(res.data); /* res.data即后端返回的list结果。*/
复制代码 此处使用set方法!我在这里折腾了2天
3. UI部分使用了knockout的模版功能,详情参见knockout官网:
ROOT节点:
- <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>
子模版:
- <script id="nodeLeafTempl" type="text/html">
- <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>
- </script>
复制代码 若涉及到模版循环嵌套的问题,请参考knockout.js官网提供的模版嵌套方案。我这里只有1、2级节点,比较简单。
至此页面即可渲染,并且叶子节点的bind-click也可以生效。我这里做的bind-click执行了Model.prototype.loadThisPage函数,该函数即拿到windowContainer组件,去load对应的权限菜单。
|
|