mustache.js实现首页元件动态渲染

code2roc

发布于 2023-07-19 14:44:47

1760

发布于 2023-07-19 14:44:47

文章被收录于专栏：IT民工的代码世界IT民工的代码世界

前言

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

针对框架层面，我们可以进行后台的可视化配置，使用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('{}')">
        <div class="noticeleft">
            <span class="noticetitle noticeindex">{{index}}</span>
            <span class="noticetitle">{}</span>
        </div>
        <div class="noticeright">
            <span class="noticetip">{{publishuname}}</span>&nbsp;
            <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>

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染