Javascript 删除databind jquery datatable以添加行

我正在阅读一本书，书中作者展示了一种自定义绑定jquery数据表的方法。但是，我在添加新行时遇到了一些困难。当您填写表单并点击add时，数据表变为空

我认为datatable没有成功地销毁和重新创建

这是定制绑定

ko.bindingHandlers.dataTable = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var value = valueAccessor(),
      allBindings = ko.utils.unwrapObservable(allBindingsAccessor()),
      options = allBindings.dataTableOptions || {},
      $element = $(element);

    $element.dataTable(options);

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $element.dataTable().fnDestroy();
    });
    value.subscribe(function(oldValue) {
      console.log('one');
     $element.dataTable().fnDestroy();
      $element.find("tbody tr").remove();

    }, null, "beforeChange");

    value.subscribe(function() {
      console.log('two');
      $element.dataTable(options);
    }, null);
  }
}

您可以运行下面的整个代码段，也可以使用上面的提琴。谢谢

ko.bindingHandlers.dataTable={
init:function（元素、valueAccessor、allBindingsAccessor）{
var value=valueAccessor（），
allBindings=ko.utils.unwrapObservable（allBindingsAccessor（）），
options=allBindings.dataTableOptions | |{}，
$element=$（element）；
$element.dataTable（选项）；
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$element.dataTable（）.fndostroy（）；
});
value.subscribe（函数（oldValue）{
$element.dataTable（）.fndostroy（）；
$element.find（“tbody tr”）.remove（）；
}，空，“变更前”）；
value.subscribe（函数（）{
$element.dataTable（选项）；
}，空）；
}
}
职能员工（id、名、姓、电话、部门）{
var self=这个；
this.id=ko.可观察（id）；
this.firstName=ko.observable（firstName）；
this.lastName=ko.observable（lastName）；
this.phone=ko.可观察（phone）；
this.dept=可观察的ko（dept）；
}
函数模型（）{
var self=这个；
this.employees=ko.array([
新员工（'1'，'Joe'，'Smith'，'333-657-4366'，'IT'）
]);
this.id=ko.可观察（“”）；
this.firstName=ko.observable（“”）；
this.lastName=ko.可观察（“”）；
this.phone=ko.可观察（“”）；
本部门=可观察的高（“”）；
this.add=函数（）{
self.employees.push（新员工）(
this.id（）、this.firstName（）、this.lastName（）、this.phone（）、this.dept（）
));
//log（ko.toJSON（self.employees））
}
}
var mymodel=新模型（）；
$（文档）.ready（函数（）{
ko.应用绑定（mymodel）；
});

身份证件
弗斯特
最后
电话
部

身份证件：


第一：


最后:


电话：


部：


我们不确定这是否是最好的方法，但到目前为止我已经想到了这一点


ko.bindingHandlers.dataTable={
init:function（元素、valueAccessor、allBindingsAccessor）{
var value=valueAccessor（），
行=ko.toJS（值）；
allBindings=ko.utils.unwrapObservable（allBindingsAccessor（）），
options=allBindings.dataTableOptions | |{}，
$element=$（element）；
$element.dataTable（选项）；
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$element.dataTable（）.fndostroy（）；
});
},
更新：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
var value=valueAccessor（），
行=ko.toJS（值）；
console.log（行）；
$（元素）。查找（“tbody tr”）.remove（）；
var table=$（元素）.DataTable（）；
table.clear（）.draw（）；
$.each（行，函数（索引，行）{
var myArray=[]；
$.each（行、函数（键、值）{
myArray.push（值）
});
table.row.add（myArray.draw（）.node（））
});
}
}
职能员工（id、名、姓、电话、部门）{
var self=这个；
this.id=ko.可观察（id）；
this.firstName=ko.observable（firstName）；
this.lastName=ko.observable（lastName）；
this.phone=ko.可观察（phone）；
this.dept=可观察的ko（dept）；
}
函数模型（）{
var self=这个；
this.employees=ko.observableArray（“”）
this.id=ko.可观察（“”）；
this.firstName=ko.observable（“”）；
this.lastName=ko.可观察（“”）；
this.phone=ko.可观察（“”）；
本部门=可观察的高（“”）；
this.add=函数（）{
self.employees.push（新员工）(
this.id（）、this.firstName（）、this.lastName（）、this.phone（）、this.dept（）
));
//log（ko.toJSON（self.employees））
}
}
var mymodel=新模型（）；
$（文档）.ready（函数（）{
ko.应用绑定（mymodel）；
mymodel.employees.push（新员工（'1'，'Joe'，'Smith'，'333-657-4366'，'IT'））
});

身份证件
弗斯特
最后
电话
部

身份证件：


第一：


最后:


电话：


部：


我看到的第一个问题是在销毁数据表后没有更新html表

我在这里更新了第二个下标：

value.subscribe（函数（行数据）{
var$tb=$element.find（“tbody”）；
$.each（行数据，函数（idx，项）{
$tb.append（“+item.id（）+”“+item.firstName（）+”“+item.lastName（）+”“+item.phone（）+”“+item.dept（）+”）；
});
此外，如果您打算开始定期使用Knockout，有两个插件可以将您的JSON转换为视图模型
value.subscribe(function(rowData) {
  var $tb = $element.find("tbody");
  $.each(rowData, function(idx, item) {
    $tb.append("<tr><td>" + item.id() + "</td><td>" + item.firstName() + "</td><td>" + item.lastName() + "</td><td>" + item.phone() + "</td><td>" + item.dept() + "</td></tr>");

  });