【JS】Knockout動態刷新及綁定數據

<script>
    // Knockout ViewModel Define
    function RemarkTemplateModel() {
        var self = this;        // Current Instance
 
        self.RemarkTemplate = ko.observableArray([]);
 
        self.RemarkTemplateDelete = function (data) {
            if (confirm('是否刪除該說明模板？該操作不可恢復！')) {
 
                customerAlert('操作成功', '成功刪除模板：' + data.TempateName, 'success', function () {
                    self.RemarkTemplate.remove(data);
                });
            }
        }
    }
 
    var viewModel = new RemarkTemplateModel();
 
    $(function () {
        ko.applyBindings(viewModel);
 
        // 加載數據
        $.getJSON('/manage/RemarkTemplate/ProjectDescTempleteGetView', function (data) {
            if (data.ResponseCode != 0) {
                viewModel.RemarkTemplate(JSON.parse(data.ResponseData));
            }
            else
                customerAlert('操作成功', data.ResponseMessage, 'error');
        });
    });
</script>
 
<div class="container-fluid">
 
    <table class="table table-bordered table-condensed table-hover">
        <tbody data-bind="foreach:RemarkTemplate">
            <tr>
                <td><span data-bind="text: TempleteName"></span></td>
                <td><button type="button" data-bind="click: $parent.RemarkTemplateDelete">刪除</button></td>
            </tr>
        </tbody>
        <tbody data-bind="attr:{hidden:viewModel.RemarkTemplate().length >0}">
            <tr>
                <td colspan="2">無數據</td>
            </tr>
        </tbody>
    </table>
</div>