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

前言

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

​

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

表结构

​

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

可视化配置

​

​

模板定义

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

 {{elementtitle}}
 

  更多
 


 {{#data}}
 

  

   {{index}}
   {{title}}
  
  

   {{publishuname}} 
   {{publishdate}}
  
 
 {{/data}}

主页面模板渲染

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

到此这篇关于mustache.js实现首页元件动态渲染的文章就介绍到这了,更多相关mustache.js首页元件动态渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！