Knockout.js 3.4 Custom Binding for jQuery Datatables.net

Hey guys I created a custom binding that works with knockout 3.4 out of the box. I know that alot people have been trying to get this to work and the solution was not intuitive. I first had to edit the knockout source code and create a pull request in the knockout repository to have two events added to the source. These events were, beforeRenderAll and afterRenderAll. The best way to make datatables play nicely with knockout seemed to be, destroy the datatable, let knockout render its bindings, then reinitialize the datatable. I have created a pull request with knockout to add two events to the foreach binding that will make things easier for knockout to play nice with many jQuery plugins that break the knockout bindings. Those changes aren't too far off. Maybe 5 or 6 months or so. Should be in 3.5 or 4.0.

But with a hint from one of the top knockout devs, I was able to create a binding that works with knockout right out of the box!!

This binding is located here --> https://github.com/zachpainter77/DatatablesForEach-Custom-Knockout-Binding

Pull Request for knockout --> https://github.com/knockout/knockout/pull/1856

Example --> JSFIDDLE

If you like this binding, please give me a star on git hub!

Here is the code:

ko.bindingHandlers.dataTablesForEach = {
    page: 0,
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        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);
        ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
        (function() {
            var 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 };
    }
};