jsrender简单封装

一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。

如下为自己封装的JsRender模板语法
首先在页面引入jsrender.min.js

方法一:

 useTemplate: function (templateId, elementId, data, helpersOrContext,noIteration) {
            var template = templateMap[templateId]
            if (!template) {
                template = jsrender.templates(htmlDecode($("#" + templateId).html()));
                templateMap[templateId] = template
                $("#" + templateId).outerHTML = "";
            }
            var htmlOutput = template.render(data, $.extend(templateHOC,helpersOrContext),   noIteration);
            //$("#" + elementId).html(htmlOutput);
            $("#" + elementId)[0].innerHTML = htmlOutput;
        }

方法二：

        useTemplateAuto: function (elementId, data, helpersOrContext, noIteration) {
            var arr = templateMap[elementId], template, targetElement;
            if (arr) {
                template = arr[0];
                targetElement = arr[1];
            } else {
                var element = $("#" + elementId)
                template = jsrender.templates(htmlDecode(element.html()));
                targetElement = element.parent();
                templateMap[elementId] = [template, targetElement]
            }
            var htmlOutput = template.render(data, $.extend(templateHOC, helpersOrContext), noIteration);
            targetElement.html(htmlOutput);
            //targetElement[0].innerHTML = htmlOutput;
        }

方法三：

        useTemplateAll: function (data, helpersOrContext, noIteration) {
            //var elements = $('script[type="text/x-jsrender"]')
            var elements = $('script[type="text/html"]')
            for (var i = 0; i < elements.length; i++) {
                var template = jsrender.templates(htmlDecode(elements[i].innerHTML));
                var htmlOutput = template.render(data, $.extend(templateHOC, helpersOrContext), noIteration);
                elements[i].outerHTML = htmlOutput;
            }
        }

        htmlDecode: function (str) {
            return str.replace(
                /&(lt|gt|nbsp|amp|quot);/ig,
                function (all, t) {
                    return htmlDecodeMap[t];
                }
            );
        },

使用方法如下：

  <script id='indexPageDynamicNewsData' type="text/html">
      <li class="flex-between">
          <p>
             <span class="title" data-id='{{:#data["id"]}}' title="{{:#data['title']}}">{{:#data['title']}}
              </span>
              <i style="{{:~getImg(#data,#index)}}" ></i>
          </p>
          <span class="date">{{:#data['updateTime']}}
          </span>
       </li>
</script>


       core.useTemplateAuto('indexPageDynamicNewsData', res, {
            getImg: function (data, index) {
                            // 判断时间
             var startDate = data.updateTime，
                 endDate = new Date()，
                 startD = new Date(Date.parse(startDate.replace(/-/g, "/"))),
                days = parseInt((endDate.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
              if (days < 30) {
                   return 'display: inline-block;';
              } else {
                  return 'display: none;'
              }
            },
        })
//'indexPageDynamicNewsData'为scriptid id,res为异步获取的数据，getImg为script中使用到的方法，可传递两个参数，项和索引，方法可以有多个 script中{{:#data}}为数据的一项。