jquery - 使用 knockout 可观察数组填充数据表

Question

我想用 knockoutjs observable 数组填充我的数据表。这是我的 JavaScript 代码:

function AppViewModel()
{
var self = this;
self.tableData = ko.observableArray();

 $.ajax({
    type: "GET",
    url: "<?php echo $this->config->base_url('api/categoryList')?>",    
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
            console.log(result);
            self.tableData(result);
        },

    error: function (err) {
            alert("err");
        }
      });// you have missed this bracket

}

var vm = new AppViewModel();
ko.applyBindings(vm);

这是我的 HTML:

我从ajax请求得到的json对象是:

{
    "aaData": [
        {
            "client_Id": "",
            "categoryId": "1",
            "categoryName": "Individual",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "2",
            "categoryName": "Firm",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "3",
            "categoryName": "Private Limited Company",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "5",
            "categoryName": "company",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        }
    ]
}

我收到 JavaScript 中的对象不是函数错误，并且 DataTable 无法重新初始化警报。

<table class="table table-bordered" 
    data-bind="
        dataTable: { 
            aaData: tableData, 
            options: { 
                        bJQueryUI: true, 
                        aoColumns: [ 
                            { sTitle: 'categoryName', mData: 'categoryName' }, 
                            { sTitle: 'categoryDescription', mData: 'categoryDescription' } 
                        ] 
                    } 
        }" 
/>

请帮忙解决这个问题。谢谢。

Answer 1

您正在使用非数组的对象填充 observableArray:

success: function (result) {
    console.log(result);
    self.tableData(result);

你也这么说

result = {
    "aaData": [
        {"client_Id":"","categoryId":"1","categoryName":"Individual","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"2","categoryName":"Firm","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"3","categoryName":"Private Limited Company","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"5","categoryName":"company","categoryDescription":"","lastUpdatedBy":""}
    ]
} 

所以你需要用result.aaData填充observableArray:

success: function (result) {
    console.log(result);
    self.tableData(result.aaData);

编辑:

查看您正在使用的数据表绑定(bind)处理程序的来源 ( Knockout.js DataTable bindings )，您的绑定(bind)选项不正确。您应该在此处使用 data 重新电镀 aaData:

<table class="table table-bordered" 
    data-bind="
        dataTable: { 
            data: tableData,  // <-- Here!
            options: {
                ...