Derik Whittaker

Syndication

News


Where to put custom Knockout Binding Implementations

The other day I was creating my first Knockout Custom Binding which was pretty straight forward.  But I was a bit stumped as to what was the ‘best’ practice for where to put this custom binding.  Of course I did not want to put it in my view model as that would defeat the purpose/idea behind creating a custom binding, which is to provide a global, reusable way to perform an action.  My gut told me to put the binding in its own file but I thought I would ask twitter for its advice and below are some of the responses I received, this told me I was on the right path.

image

Since the conclusion was to put all custom Knockout bindings in their own file the only thing left to do was to implement this.  Here is what I did.

Create CustomKnockoutBindings.ts file

In my case I am using Typescript (in case .ts extension threw you off) So I needed to implement the code below:

image

If you look at the implemented code you should understand 2 things

  1. We are going to create our bindings within the jQuery Document Ready method.  This will allow for our bindings to be created when the page loads.  This also prevents us from having to ‘call an init’ method from any of our view models
  2. We are extending the KnockoutBindingHandlers interface (this is found in knockout.d.ts).  We need to extend this interface otherwise you will get a compile error from Typescript saying that bindingHandlers.strikeThroughCompleted does not exist on KnockoutBindingHandlers

Once you have the above implemented you should be good to go, only thing left to do now is to implement this in side your HTML.

Implement my custom binding in HTML

image

In the code above you can see that I am using our strikeThroughCompleted binding in the same manor as the ‘text’ binding immediately to its left.

Till next time,


Posted 03-17-2013 6:10 AM by Derik Whittaker

[Advertisement]

Comments

Joe Wilson wrote re: Where to put custom Knockout Binding Implementations
on 03-17-2013 3:00 PM

Short and sweet.  I like it.  Maybe enough for a Dime Cast video? :>

Rob Eisenberg wrote re: Where to put custom Knockout Binding Implementations
on 03-17-2013 3:31 PM

My recommendation is that you put each binding handler in a separate file. You can group them all in a binding handlers folder of course. If you are using something like require.js, then number of scripts files and ordering are non-issues. So, it's better to just worry about organizing code for maintainability.

Rob wrote re: Where to put custom Knockout Binding Implementations
on 03-18-2013 5:25 PM

I realise that your example is contrived to make a point about bindings, and I don't want to be Mr "well actually".

But if anyone's trying to do something similar, you don't need a custom binding for this particular use case. The css binding (knockoutjs.com/.../css-binding.html) handles this very well:

<span data-bind="text:DisplayReminderDate, css: {strikethrough:Status().Description().toLowerCase() === 'completed'}">

Of course, your way encapsulates things a bit nicer, other options for encapsulation would be to create a computed property for IsCompleted on the viewmodel itself...

Rob wrote re: Where to put custom Knockout Binding Implementations
on 03-18-2013 5:25 PM

I realise that your example is contrived to make a point about bindings, and I don't want to be Mr "well actually".

But if anyone's trying to do something similar, you don't need a custom binding for this particular use case. The css binding (knockoutjs.com/.../css-binding.html) handles this very well:

<span data-bind="text:DisplayReminderDate, css: {strikethrough:Status().Description().toLowerCase() === 'completed'}">

Of course, your way encapsulates things a bit nicer, other options for encapsulation would be to create a computed property for IsCompleted on the viewmodel itself...

Derik Whittaker wrote re: Where to put custom Knockout Binding Implementations
on 03-19-2013 8:49 PM

@Rob

My example is to prove a point, but I would also argue it is also a much cleaner way to implement this as well.

buy social bookmarks wrote re: Where to put custom Knockout Binding Implementations
on 03-24-2013 6:23 PM

c4g9ak This is one awesome blog post.Really thank you! Cool.

<a href="www.proaudiovisual.com.au">HDMI cable</a> wrote re: Where to put custom Knockout Binding Implementations
on 03-30-2013 3:45 AM

Great tip Rob, It makes a lot of sense to keep them all in seperate files. Thats way its a lot easier to keep everything organized.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)