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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
javascript常用的方法整理
Aug 20 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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
国内咖啡文化
2021/03/03 咖啡文化
IE6 fixed的完美解决方案
2011/03/31 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
用Python实现职工信息管理系统
2020/12/30 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
医大实习自我鉴定
2013/12/07 职场文书
初中校园之声广播稿
2014/01/15 职场文书
中学家长会邀请函
2014/02/03 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
毕业论文致谢范文
2015/05/14 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle