template render in javascript

art-template for github

中文官方文档

 

html中添加js：

<script type="text/javascript" src="~/Scripts/template-web.js" asp-append-version="true"></script>

 

html中添加template-ui：

<script id="logs_Template" type="text/html">
    <table style="padding:0;text-align:center">
        {{each ChangeLogs}}
        <tr>
            <td><div class="input-control text size3">修改人:{{$value.OperateUserName}}</div></td>
            <td><div class="input-control text size3">修改时间:{{$value.OperateShowTime}}</div></td>
            <td><div class="input-control text size3">查看详情 <span class='content-show-control' onclick="walletChangeRecordCreator.detailClickEvent(this)"><i class='fa fa-angle-down'></i></span></div></td>
        </tr>
        <!--分割线-->
        <tr>
            <td colspan="4" style="padding-right:0;">
                <div style="border-top: 1px dashed #ccc"></div>
            </td>
        </tr>
        <tr class="change-detail-properties-tr" style="display:none">
            <td colspan="4" style="padding:0;">
                <table>
                    <tr>
                        <td><div class="input-control text size3"><b>字段名</b></div></td>
                        <td><div class="input-control text size3"><b>修改前</b></div></td>
                        <td><div class="input-control text size3"><b>修改后</b></div></td>
                    </tr>
                    {{each $value.ChangedProperties}}
                    <tr>
                        <td><div class="input-control text size3">{{$value.PropertyShowName}}</div></td>
                        <td><div class="input-control text size3">{{$value.OldValue}}</div></td>
                        <td><div class="input-control text size3">{{$value.NewValue}}</div></td>
                    </tr>
                    {{/each}}
                </table>
            </td>
        </tr>
        {{/each}}
    </table>
</script>

　　

js中post调用获取数据之后重新渲染template-ui

post调用

      getLogsPost: function () {
            walletChangeRecordCreator.getEle$(".wallet_change_record_part").hide();
            $.ajax({
                    data: {
                        WalletId:"@Model.WalletId"
                    },
                    url: "@Url.Content("~/ChargesCenter/WalletChangeLogsDetail")",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    success: function (data) {
                        if (data.Success && data.Content) {
                            walletChangeRecordCreator.fileLogsContent(data.Content);
                            //$("#PostSucess").val(true);
                        } else if(!data.Success) {
                            showAlert(data.Message);
                        };
                    },
                    error: function (jqXHR, error, errorThrown) {
                        if (jqXHR.status == 0 || jqXHR.status == 401) {
                            window.top.location = logoutUrl;
                        } else {
                            showAlert(error);
                        };
                    }
                });
        },　　

template-ui重新渲染

        fileLogsContent: function (jsonData) {
            if (!jsonData) return;
            //console.log(jsonData);
            var fdHtml = template("logs_Template", jsonData);
            walletChangeRecordCreator.getEle$(".wallet_change_record_part ").html(fdHtml);
            walletChangeRecordCreator.getEle$(".wallet_change_record_part").show();
        },