{"id":106,"date":"2014-06-29T15:49:20","date_gmt":"2014-06-29T14:49:20","guid":{"rendered":"http:\/\/www.vosseburcht.com\/?p=106"},"modified":"2014-06-29T15:49:20","modified_gmt":"2014-06-29T14:49:20","slug":"creating-bindinghandlers-in-knockout-js-with-typescript","status":"publish","type":"post","link":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/2014\/06\/29\/creating-bindinghandlers-in-knockout-js-with-typescript\/","title":{"rendered":"Creating bindinghandlers in Knockout.js with TypeScript."},"content":{"rendered":"<p>In Javascript, creating knockout.js binding handlers can be done the following way:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">ko.bindingHandlers.yourBindingName = {\n    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {\n        \/\/ This will be called when the binding is first applied to an element\n        \/\/ Set up any initial state, event handlers, etc. here\n    },\n    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {\n        \/\/ This will be called once when the binding is first applied to an element,\n        \/\/ and again whenever any observables\/computeds that are accessed change\n        \/\/ Update the DOM element based on the supplied values here.\n    }\n};<\/pre>\n<p>However, if you use the same syntax in TypeScript if you have the knockout.js type definitions referenced, you will notice some nice red squigly lines under the &#8220;yourBindingName&#8221; part. This is because it is not in the bindingHandlers interface. To fix this you can add the new binding to the interface.<\/p>\n<p>To do this, create a file with the .d.ts extension (for instance, myBindingHandlers.d.ts) and add the following code to it:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">\/\/\/ &lt;reference path=\"typings\/knockout\/knockout.d.ts\" \/&gt;\n\ninterface KnockoutBindingHandlers {\n    yourBindingName: KnockoutBindingHandler;\n}<\/pre>\n<p>This wil add your binding handler to the interface, and everything works and its typesafe too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Javascript, creating knockout.js binding handlers can be done the following way: ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { \/\/ This will be called when the binding is first applied to an element \/\/ Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { \/\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/106"}],"collection":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":0,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"wp:attachment":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}