当前位置:  首页  >  PHP资讯  >  业界资讯

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

这篇文章主要介绍了mustache.js实现首页元件动态渲染的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前言

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

​

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

表结构

​

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

可视化配置

​

​

模板定义

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

 
{{elementtitle}}
{{#data}}
{{index}} {{title}}
{{publishuname}}  {{publishdate}}
{{/data}}

主页面模板渲染

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

  

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

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4