快捷導(dǎo)航

mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼

更新時(shí)間：2020年12月28日 09:56:47 作者：code2roc

這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

在項(xiàng)目開發(fā)過程中，特別是OA類軟件，會(huì)針對(duì)郵件/待辦/公告等模塊在主頁(yè)面進(jìn)行快捷查看的元件展示要求，類似效果如下

針對(duì)框架層面，我們可以進(jìn)行后臺(tái)的可視化配置，使用mustache.js在主頁(yè)面進(jìn)行動(dòng)態(tài)渲染，避免了對(duì)主頁(yè)面的繁瑣的硬編碼工作，同時(shí)針對(duì)每個(gè)信息展示的元件進(jìn)行內(nèi)部個(gè)性化處理

表結(jié)構(gòu)

包含了元件名稱，元件模板路徑，元件列表數(shù)據(jù)路由，查看更多路由，啟用/禁用等

可視化配置

模板定義

這里的模板直接使用的html文件，方便css與js的修改，簡(jiǎn)單的使用了mustache.js進(jìn)行模板數(shù)據(jù)綁定，當(dāng)然也可以使用其他模板引擎

<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>

主頁(yè)面模板渲染

主要是針對(duì)當(dāng)前配置的模板進(jìn)行分組，渲染每行每列的元件，模板文字內(nèi)容在后端處理獲取完成，前端調(diào)用Mustache.render方法進(jìn)行數(shù)據(jù)的填充，同時(shí)需要注意針對(duì)每個(gè)元件定義局部刷新的方法，避免操作完畢后針對(duì)主頁(yè)面整體刷新

<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
       }
       //刷新事件存儲(chǔ)

       pageData.ElementList[index]["RefreshEvent"] = function () {
        //請(qǐng)求數(shù)據(jù)
        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);
          }
         })
       }
       //請(qǐng)求數(shù)據(jù)
       CommonRefresh(id);
      }
     }
    } else {
     OpenFail(res.data)
    }
   })
  }

  function CommonRefresh(id) {
   $(pageData.ElementList).each(function () {
    if (this.ElementID == id) {
     this.RefreshEvent();
    }
   })
  }
 </script>

</body>

到此這篇關(guān)于mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的文章就介紹到這了,更多相關(guān)mustache.js首頁(yè)元件動(dòng)態(tài)渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: