handlebars.js 自定义helper（过滤）

---

• 将对象数据渲染到页面上；
• id 插入公共样式；

handlebars.js 自定义helper（过滤）demo

  <script id="tbody-content-template" type="text/x-handlebars-template">
        {{#each this}}
        <tr>
            <td>{{addOne @index}}</td>
            <td>{{ChildName}}</td>
            <td>{{genderVal Gender}}</td>
            <td>{{birthdayVal Birthday}}</td>
            <td>{{Height}}</td>
            <td>{{Weight}}</td>
            <td> {{SitReach}}</td>
            <td>{{Balance}}</td>
            <td>{{totalVal TotalScore}}</td>
            <td>{{missDataVal MissDataType}}</td>
        </tr>
        {{/each}}

    </script>

      <tbody id="tableList"></tbody>


      <script type="text/javascript">
        var dataList=[];
        var parameter = {
            KindergartenId: kindergartenId
         }
            var url = "/test/checkData";
            utilities.CallGetApi(url, parameter).done(function (data) {
            dataList=data;
            var contentHtml = Handlebars.compile($("#tbody-content-template").html());
            $("#tableList").empty();
            $("#tableList").append(contentHtml);
      </script>

自定义helper

    Handlebars.registerHelper('genderVal', function (value) {
            return value == 1 ? "男" : "女";
    });
    Handlebars.registerHelper('birthdayVal', function (value) {
            return value.CharpStr2Date();
    });
    Handlebars.registerHelper("addOne",function(index){
             return parseInt(index)+1;
    });
    Handlebars.registerHelper('missDataVal', function(value) {
            var missTypeVal = {
                0: "已测完",
                undefined: "未测试",
                1: "因故缺席",
                2: "测试中"
            };
            return missTypeVal[value];
    });
    Handlebars.registerHelper('totalVal', function (value) {
            var gradeContent = "";
            if (value > 31) {
                gradeContent = "优秀";
            } else if (value >= 28 && value < 31) {
                gradeContent = "良好";
            } else if (value >= 20 && value < 28) {
                gradeContent = "合格";
            } else {
                gradeContent = "不合格";
            }
            return gradeContent;
    });

Handlebars.js 模板引擎 | Ghost中文网
Handlebars.js 中文文档

---

纯属个人观点,仅供参考！