Question

Lets suppose that I have simple html markup:

<div>
    <input type="text"/>
</div>

when I click on div I would like to focus input. What ways of doing this i have?

I was thinking about several possibilities, but non looked good:

• just forget about knockout and use good old jQuery. But then code turns into spaghetti and UI behavior is spread across many places.
• create custom bindingHandler for input and add click binding to div, clicking changes some model property, custom binding reacts on it and raises focus event. But this looks too complicated for such easy thing (at least in jq it was easy).

Is there other options?

Answer 1

Knockout is great for building a UI with a backing data model. This doesn’t help when you need to do low-level DOM manipulation (like you’re describing). In fact, on the introduction page for knockout, the author states:

Everyone loves jQuery! It’s an outstanding replacement for the clunky,
inconsistent DOM API we had to put up with in the past. jQuery is an
excellent low-level way to manipulate elements and event handlers in a
web page. I certainly still use jQuery for low-level DOM manipulation.
KO solves a different problem.

(emphasis mine)

Personally I would think it’s fine to use jQuery for this type of manipulation. If you break your event handlers and MVVM code into separate JavaScript files, you can avoid writing spaghetti code.