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操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 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中文汉字验证码
2007/04/08 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python3 读取Word文件方式
2020/02/13 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
业务员的岗位职责
2014/03/15 职场文书
协议书格式
2014/04/23 职场文书
法律系毕业生求职信
2014/05/28 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
通讯稿格式及范文
2015/07/22 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL