Javascript 在取消ViewModel更改时更新jquery数据表

我有一个Datatable，它从Knockout ViewModel数组中获取数据。当我将新对象推送到数组时，可以很好地添加新行，但当该数组中的对象发生更改时，该行不会被更新

相关ViewModel代码：

  .....
  self.Products = ko.observableArray();
  .....

示例数据（例如ko.toJSON（VM.Products（））的结果）：

然后是数据表代码：

  var CartDt = $("#PurchasedPrdTbl").DataTable({        
    pageLength: 5,      
    aoData: ko.toJSON(VM.Products()),
    columns: [
        { "title": 'Price' },
        { "title": 'Name' },
        { "title": 'Description' },
        { "title": 'Quantity' },
        {
            "className": 'remove-details-control',
            "orderable": false,
            "data": null,
            "defaultContent": '',
            "title": "Sell Me!",
            "fnRender": function (oObj) {

                return oObj.aData;
            }
        }
    ]
});

我试过ajax.reload，但没用

任何想法都很好，谢谢

编辑：

我正在尝试fnUpdate（），如下所示：

 CartDt.fnUpdate([{"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3}],1);

但我明白了：

---

未捕获的TypeError:undefined不是函数

这是因为在初始化datatables时绑定到敲除可观察数组的html被破坏了。。。初始化后，html被复制并重新格式化为“datatables”。因此，在datatables初始化之后查看的元素与knockout绑定到的元素不同。我已经创建了一个自定义绑定来使用带有knockout的datatables。它依赖于敲除叉，敲除叉在渲染之前和渲染之后添加所有事件。我已经使用淘汰git hub存储库创建了一个pull请求。如果下面的解决方案对您有所帮助，请在pull请求上留下评论，以便将其合并到淘汰赛3.4中。。。谢谢

---

您正在将JSON绑定到数据表（必需）。如果你修改了它们，它们不会改变，因为没有observable's right.@spuer很酷，但是JSON是observable-self.Products=ko.observableArray（）；当然不是。您需要使用

arrayMap

或映射插件将JSON数据转换为可观察数据，并将其推送到

self.Products

中。简单地将JSON数据分配给observableArray并不意味着里面的一切都是可观察的。

 CartDt.fnUpdate([{"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3}],1);

ko.bindingHandlers.DataTablesForEach = {

        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
             var nodes = Array.prototype.slice.call(element.childNodes, 0);
            ko.utils.arrayForEach(nodes, function (node) {
                if (node && node.nodeType !== 1) {
                    node.parentNode.removeChild(node);
                }
            });
            return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

            var value = ko.unwrap(valueAccessor()),
            key = "DataTablesForEach_Initialized";

            var newValue = function () {
                return {
                    data: value.data || value,
                    beforeRenderAll: function (el, index, data) {

                        if (ko.utils.domData.get(element, key)) {
                            $(element).closest('table').DataTable().clear();
                            $(element).closest('table').DataTable().destroy();
                        }
                    },
                    afterRenderAll: function (el, index, data) {
                        $(element).closest('table').DataTable(value.options);
                    }

                };
            };

            ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

            //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
            if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
                ko.utils.domData.set(element, key, true);
            }

            return { controlsDescendantBindings: true };
        }
    };