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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
js中的this关键字详解
Sep 25 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
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 防恶意刷新实现代码
2010/05/16 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php修改时间格式的代码
2011/05/29 PHP
类似框架的js代码
2006/11/09 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python内置函数reversed()用法分析
2018/03/20 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python3个性签名设计实现代码
2018/06/19 Python
Python制作动态字符图的实例
2019/01/27 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python openpyxl模块的使用详解
2021/02/25 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
办公室岗位职责
2015/02/04 职场文书
资料员岗位职责
2015/02/10 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技