使用knockout.js 完毕template binding

Posted 2020-09-24 liguangsunls

//1.template 

<script id="txn-details-template" type="text/html">
    <!--Status 0 : Success , Status 1 : Processing , Status 2 : Rejected-->
    <div class="pull-left last-ten-records">
        @string.Format(Resx.RecentRecordsShowHere_0,5)
    </div>
    <div class="row">
        <table class="table table-bordered tbl">
            <thead>
                <tr>
                    <th>
                        @Resx.WithdrawalHistory_RequestDate
                    </th>
                    <th>
                        @Resx.WithdrawalHistory_TransactionNo
                    </th>
                    <th>
                        @Resx.WithdrawalHistory_Method
                    </th>
                    <th>
                        @Resx.WithdrawalHistory_Status
                    </th>
                    <th>
                        @Resx.WithdrawalHistory_Amount
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Values">
                <tr>
                    <td data-bind="text: Date"></td>
                    <td data-bind="text: TransactionNo"></td>
                    <td data-bind="text: Method"></td>
                    <!-- ko if: StatusCode == 0 -->
                    <td style="color:#efc944" data-bind="text: Status"></td>
                    <!-- /ko -->
                    <!-- ko if: StatusCode == 1 -->
                    <td style="color:#efc944" data-bind="text: Status"></td>
                    <!-- /ko -->
                    <!-- ko if: StatusCode == 2 -->
                    <td style="color:#80ca0b" data-bind="text: Status"></td>
                    <!-- /ko -->
                    <!-- ko if: StatusCode == 3 -->
                    <td style="color:#ff7d00" data-bind="text: Status"></td>
                    <!-- /ko -->
                    <!-- ko if: StatusCode == 4 -->
                    <td style="color:#ff7d00" data-bind="text: Status"></td>
                    <!-- /ko -->
                    <td><span data-bind="text: Amount" style="float: right;margin-right: 27%;"></span></td>
                </tr>
            </tbody>
            <tfoot>
                <tr><td colspan="5"></td></tr>
            </tfoot>
        </table>
    </div>



</script>

//2.div for binding
<div id="txn-details" class="txn-details" data-bind="template: { name: ‘txn-details-template‘ }">

        </div>

//3.js 


var preFetch = {
    pageLoaded: false, data: undefined
};

$(document).ready(function () {

    $("#btnAccountDetails").click(function () {

        var arrow = $("#arrow");
        if ($(arrow).attr("showing")) {
            $(arrow).html("<i class=\"fa fa-angle-double-up\"></i>");
            $(arrow).removeAttr("showing", 1);
            $("#txn-details").slideToggle(false);
            prefetchDataToCache();
            return;
        }

        $(arrow).html("<i class=\"fa fa-angle-double-down\"></i>");
        $(arrow).attr("showing", 1);
        $("#txn-details").slideToggle(true);
    });

    prefetchDataToCache();

});

function binding() {
    var vmVals = ko.observableArray();
    for (var i = 0; i < preFetch.data.Values.length; i++) {
        vmVals.push(preFetch.data.Values[i]);
    }

    ko.applyBindings({ Values: vmVals }, document.getElementById("txn-details"));
}

function prefetchDataToCache() {
    $.ajax({
        type: ‘POST‘,
        url: $("#hdnLatestTxnUrl").val(),
        success: function (data) {
            preFetch.data = data;

            ko.cleanNode($("#txn-details")[0]);
            binding();

        }
    });
}

MVC Controller 返回的json结构：

{Values : [{Status : ‘xxx‘ ,StatusCode : 1 , Date: ‘xxxx‘, TransactionNo : ‘xxxx‘ , Method: ‘xxx‘ , Amout : 100} ]}