欢迎光临
我的个人博客网站

mustache.js实现首页元件动态渲染


前言

在项目开发过程中,特别是OA类软件,会针对邮件/待办/公告等模块在主页面进行快捷查看的元件展示要求,类似效果如下

mustache.js实现首页元件动态渲染mustache.js实现首页元件动态渲染

针对框架层面,我们可以进行后台的可视化配置,使用mustache.js在主页面进行动态渲染,避免了对主页面的繁琐的硬编码工作,同时针对每个信息展示的元件进行内部个性化处理

表结构

mustache.js实现首页元件动态渲染mustache.js实现首页元件动态渲染

包含了元件名称,元件模板路径,元件列表数据路由,查看更多路由,启用/禁用等

可视化配置

mustache.js实现首页元件动态渲染mustache.js实现首页元件动态渲染

mustache.js实现首页元件动态渲染mustache.js实现首页元件动态渲染

模板定义

这里的模板直接使用的html文件,方便css与js的修改,简单的使用了mustache.js进行模板数据绑定,当然也可以使用其他模板引擎

<div class="cellheadcontainer">     <span class="celltitletext">{{elementtitle}}</span>     <div class="celltitleop">         <a style="color:white" class="morebtn" onclick="OpenMore('{{elementmoreurl}}')">更多</a>     </div> </div> <div class="cellcontentcontainer">     {{#data}}     <div class="notciecell" onclick="OpenDetail('{{title}}')">         <div class="noticeleft">             <span class="noticetitle noticeindex">{{index}}</span>             <span class="noticetitle">{{title}}</span>         </div>         <div class="noticeright">             <span class="noticetip">{{publishuname}}</span>&nbsp;             <span class="noticetip">{{publishdate}}</span>         </div>     </div>     {{/data}} </div> <script>     var noticeid = "{{elementid}}";     function OpenMore(url) {         OpenTopDialog( '消息通知列表', url, 600, 800, BindNotcieList)     }     function BindNotcieList() {         CommonRefresh(noticeid);     }     function OpenDetail(title) {         OpenTopDialog('消息详情', "frame/demo/notice/noticeDetail", 600, 800, BindNotcieList, title)     } </script>

主页面模板渲染

主要是针对当前配置的模板进行分组,渲染每行每列的元件,模板文字内容在后端处理获取完成,前端调用Mustache.render方法进行数据的填充,同时需要注意针对每个元件定义局部刷新的方法,避免操作完毕后针对主页面整体刷新

<body>     <div id="app">         <div id="maincontainer">             <div class="rowcontainer">                 <div class="columncontainer">                  </div>             </div>         </div>     </div>     <script>         loadcss(getRootPath() + "theme/" + GetSystemTheme() + "/main.css", true)     </script>     <script>         var pageData = {             ElementList: [],             groupCount: 0,             rowElementCount: 2         };         $(function () {             BindElement();         })          function BindElement() {             var param = {};             CloudPost(param, GetRootPath() + "frame/extend/element/findMainPageElementList", function (res) {                 if (res.code == 0) {                     pageData.ElementList = res.data;                     var rowelementcount = pageData.rowElementCount                     var groupcount = pageData.ElementList.length % rowelementcount == 0 ? pageData                         .ElementList                         .length / rowelementcount : (parseInt(pageData.ElementList.length /                             rowelementcount)) +                         1;                     pageData.groupCount = groupcount;                     var MainHtml = "";                     for (var i = 0; i < groupcount; i++) {                         var RowHtml = " <div class='rowcontainer'>";                         for (var j = 0; j < rowelementcount && i * groupcount + j < pageData.ElementList.length; j++) {                             var id = "row_" + (i + 1) + "column_" + (j + 1);                             var ColumnHtml = "<div class='columncontainer' id='" + id + "'>"                             ColumnHtml += "</div>"                             RowHtml += ColumnHtml;                         }                         RowHtml += "</div>";                         MainHtml += RowHtml;                     }                     $("#maincontainer").html(MainHtml);                      for (var i = 0; i < groupcount; i++) {                         for (var j = 0; j < rowelementcount && i * groupcount + j < pageData.ElementList.length; j++) {                             var index = i * rowelementcount + j                             var element = pageData.ElementList[index];                             var id = "row_" + (i + 1) + "column_" + (j + 1);                             pageData.ElementList[index]["ElementID"] = id;                             var renderdata = {                                 elementtitle: element.ElementName,                                 elementmoreurl: element.ElementMoreUrl,                                 elementid: id                             }                             //刷新事件存储                              pageData.ElementList[index]["RefreshEvent"] = function () {                                 //请求数据                                 CloudPost({}, GetRootPath() + element.ElementDataUrl,                                     function (res) {                                         if (res.code == 0) {                                             //合并json                                             for (var attr in res) {                                                 renderdata[attr] = res[attr];                                             }                                             var htmlcontent = Mustache.render(element.TemplatContent, renderdata);                                             $("#" + id).html(htmlcontent);                                         }                                     })                             }                             //请求数据                             CommonRefresh(id);                         }                     }                 } else {                     OpenFail(res.data)                 }             })         }          function CommonRefresh(id) {             $(pageData.ElementList).each(function () {                 if (this.ElementID == id) {                     this.RefreshEvent();                 }             })         }     </script>  </body>

mustache.js实现首页元件动态渲染

赞(0) 打赏
未经允许不得转载:张拓的天空 » mustache.js实现首页元件动态渲染
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏