A question came up on the KO forums the other day about how to highlight part of some text that was being bound. This sounded to me like an interesting place to apply a custom binding. My idea to solve this issue was to use a
highlightedText binding that looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13
You would use the binding like:
The code is not particularly clever and could likely be improved, but to me it at least illustrates how easy it is to write custom bindings that are useful and powerful. In this case, the actual text, the search string, and the css class to apply could all be observables. If any of them were to change, then the binding would automatically fire again and update the display.
After playing with this a bit, I thought that it would also be interesting if you could select some text with your mouse and have all of the matches for the text highlighted. I created another custom binding that sets an observable based on the currently selected text. So, this could be used to update the search string for the
highlightedText binding and highlight any matches for the selected string. This
selectedText binding looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
The binding works by handling the mouseup event of the element where we retrieve the selected text and properly sets the observable passed to the binding based on the text. It could be made a little less verbose, if there was an easier way to get the selected text across browsers and if it didn’t bother trying to support binding to non-observables.
I thought that maybe these bindings would be useful to someone or at least help to demonstrate how simple it is to create custom bindings that handle these types of behaviors.
Full sample here: