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;

    });