How to configure custom binding handlers with Typescript?

[Andrea Saunders]

Hello,

I'm new to the whole stack so don't take that I know something for granted. Using VS2017, Typescript, MVC, Knockout and Node Modules for the types and most other imports.

I'm trying to setup this binding handler, I tried to put it in the constructor of my ViewModel but that doesn't seem to be the right place.

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 };
    }
};

Then I tried to follow this and created  customKoBindins.d.ts:

interface KnockoutBindingHandlers {
    dataTablesForEach: KnockoutBindingHandler;
}

but VS says that it cannot find the symbol "KnockoutBindingHandler" and I don't have a extensions.ts file. Is it something that I'm supposed to create?

I can't find  a good example of how these can fit together. Are you aware of one?

[Andrea Saunders]

As far as not knowing the symbol, just reinstalled @types/knockout, somehow the npm install from the package.json didn't cover it.