0

In my view I have the following: 

           <input placeholder="Enter a subject here" data-bind="hasFocus: showDropdown, valueUpdate: 'afterkeydown' />
           <div class="dropdown" data-bind="visible: showDropdown">

The idea is that when the input has focus, a dropdown is shown, and the user can type to filter the items shown in that dropdown.

What's happening is that when I click an item in the dropdown, the input loses focus, and the dropdown closes before the click event is handled, so any anchors in the dropdown never work.

I could tie up some kind of computed observable that hides the dropdown when the input loses focus AND the clicked element is not the dropdown, but I wanted to see if there was a more elegant approach that knockout offers - maybe by adding some kind of delay before the lose-input-focus event is triggered? What are my options?

4

1 回答 1

0

This is how I handle showing a list for a similar purpose -

http://jsfiddle.net/HVUHq/

<div data-bind="event: { mouseover: showDropdown, mouseout: hideDropdown }">
    <input placeholder="Enter a subject here" data-bind="valueUpdate: 'afterkeydown'" />
    <ul data-bind="foreach: items, visible: showing">
        <li data-bind="text: Name"></li>
    </ul>
</div>

I use the event binding to show / hide the list when the mouse is coming in or out. You could massage this to work the way that you want it to on when to hide the list vs when to show it, but the general idea is to use event handlers that are built in to Knockout.

于 2013-10-13T20:43:42.033 回答