具有分页和复选框检查的Knockoutjs数据表检查所有数据绑定失败

Question

我检查所有复选框绑定与jquery数据表完全正常，没有分页但是一旦我启用分页并勾选全部并单击下一页或任何页码，属于该页面的复选框未被选中但是我的observableArry用于所选项目更新了。希望你能帮助我们。我已经花了几个小时或者这个，并且无法弄清楚究竟发生了什么。

这是我的小提琴

https://jsfiddle.net/jfmjason/d8mutbL4/2/

这是我的HTML

 <input type="checkbox" data-bind="value:true, checked: $root.selectAll"/> Select All
    <br />
     Selected People : <span data-bind="text:$root.selectedPeople().length"></span>
<br />
<div id="wrapper">
    <table id="example" style="width:100%" class="table table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>                
            </tr>
        </thead>
        <tbody data-bind="dataTablesForEach: {data: people, dataTableOptions: {
                          jQueryUI: true,
                          scrollY: 250,
                          paging: true,
                          dom: 'rtip',
                          columns:[
                              {width: '30px'},
                              {width: '30px'},
                              {width: '100px'},
                              {width: '100px'}
                          ]
                      }
                  }">
            <tr style="height:50px;">
                <td>
                <input type="checkbox" data-bind="value:$data, checked: $root.selectedPeople"/>
                </td>
                <td><span data-bind="text: id" /> </td>
                 <td> <span data-bind="text: name"></span>
                <td> <span data-bind="text: age"></span>
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <br />
    <div>

    </div>

和剧本

ForeachBindingHandler

  ko.bindingHandlers.dataTablesForEach = {
        page: 0,
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var options = ko.unwrap(valueAccessor());
          ko.unwrap(options.data);
          if(options.dataTableOptions.paging){
            valueAccessor().data.subscribe(function (changes) {
                var table = $(element).closest('table').DataTable();
                ko.bindingHandlers.dataTablesForEach.page = table.page();
                table.destroy();
            }, null, 'arrayChange');          
          }
            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, allBindings, viewModel, bindingContext) {        
            var options = ko.unwrap(valueAccessor()),
                key = 'DataTablesForEach_Initialized';
            ko.unwrap(options.data);
            var table;
            if(!options.dataTableOptions.paging){
              table = $(element).closest('table').DataTable();
                table.destroy();
            }
            ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
            table = $(element).closest('table').DataTable(options.dataTableOptions);
            if (options.dataTableOptions.paging) {
               if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
                   table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);                
               else 
                   table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);                
            }        
            if (!ko.utils.domData.get(element, key) && (options.data || options.length))
                ko.utils.domData.set(element, key, true);
            return { controlsDescendantBindings: true };
        }
    }; 

模型和绑定初始化

// Person ViewModel
     var Person = function (data, parent) {
         var that = this;
         this.id = data.id;
         this.isEdit = ko.observable(false);
         this.first = ko.observable(data.first);
         this.last = ko.observable(data.last);
         this.age = ko.observable(data.age);
         this.editButtonText = ko.computed(function () {
             return that.isEdit() ? 'Save' : 'Edit';
         });
         this.full = ko.computed(function () {
             return this.first() + " " + this.last();
         }, this);
         // Subscribe a listener to the observable properties for the table
         // and invalidate the DataTables row when they change so it will redraw


     };
     //Main ViewModel
     var ViewModel = new function () {
             var that = this;
             this.selectAll = ko.observable();
             this.selectAll.subscribe(function(value){

             if(value){
             ko.utils.arrayPushAll(that.selectedPeople, that.people());
             }else{that.selectedPeople([]);}
             })
             this.selectedPeople = ko.mapping.fromJS([]);
             this.people = ko.mapping.fromJS([]);
         };

    $(document).ready(function () {

         // Convert the data set into observable objects, and will also add the
         // initial data to the table
         ko.mapping.fromJS(
         data, {
             key: function (data) {
                 return ko.utils.unwrapObservable(data.id);
             },
             create: function (options) {
                 return new Person(options.data, ViewModel);
             }
         },
         ViewModel.people);

     ko.applyBindings(ViewModel);
 });

初始数据集

// Initial data set
 var data = [{
     id: 1,
     first: "Allan",
     last: "Jardine",
     age: 86
 }, {
     id: 2,
     first: "Bob",
     last: "Smith",
     age: 54
 }, {
     id: 3,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }, {
     id: 4,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 5,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }, {
     id:6,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 7,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 8,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 9,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 10,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 11,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }, {
     id: 12,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }
 , {
     id: 13,
     first: "Jimmy",
     last: "Jones",
     age: 32
 }];