mustache.js实现首页元件动态渲染的示例代码


Posted in Javascript onDecember 28, 2020

前言

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

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> 
   <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实现首页元件动态渲染的文章就介绍到这了,更多相关mustache.js首页元件动态渲染内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
定义select的边框颜色
Apr 28 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
js 获取时间间隔实现代码
May 12 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 #Javascript
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
js仿淘宝放大镜效果
Dec 28 #Javascript
JavaScript实现原型封装轮播图
Dec 27 #Javascript
JavaScript代码实现简单计算器
Dec 27 #Javascript
JavaScript实现雪花飘落效果
Dec 27 #Javascript
You might like
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
解析Vue 2.5的Diff算法
2017/11/28 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python os模块简单应用示例
2019/05/23 Python
解决python对齐错误的方法
2020/07/16 Python
python -v 报错问题的解决方法
2020/09/15 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
服务员岗位职责
2014/01/29 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
公务员政审个人总结
2015/02/12 职场文书
股东出资协议书
2016/03/21 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang