TwoWay фокус связывание в knockout.js

Question

У меня есть этот обычай связывание, который обновляет наблюдаемый с данными для сфокусированного дочернего элемента элемента, который применяется к:

ko.bindingHandlers.selected = 
    init: (element, valueAccessor) -> 
    receiver = valueAccessor() 
    $(element).focusin((event) -> 
     data = ko.dataFor(event.target) 
     receiver(data) 
    ) 

Это работает лучше, чем стандартная hasFocus обязательный для случая использования, где я хочу какая-то другая часть страницы, чтобы показать информацию о сфокусированном пункте:

<ul data-bind="foreach: items, selected: selectedItem"> 
    <li><a href="#" data-bind="text: name"></a></li> 
</ul> 
<p data-bind="with: selectedItem"> 
    Selected: <span data-bind="text: name"></span> 
</p> 

Теперь я хочу, чтобы сделать это двухстороннее связывание а, так что я могу изменить selectedItem от моего сценария кода и сделать правильный элемент списка, сфокусированный на $.focus(). Любые идеи о том, как расширить привязку к работе в обоих направлениях?

Я понимаю, что мне может понадобиться подход «привязки к потокам потомков» и не сможет применить привязку к тому же элементу, что и привязка foreach, но это нормально. Проблема заключается в том, что дочерний элемент не привязан при вызове функции обновления (dataFor возвращает неопределенный).

Answer 1

Вы можете пройти через элементы потомков в вашей update функции и проверьте, какой элемент следует сфокусировать, используя ko.dataFor:

update: (element, valueAccessor) -> 
    receiver = valueAccessor() 
    item = receiver() 
    $(element).find("*").each((index, elem) ->  
     if (item == ko.dataFor(elem)) 
     $(elem).focus() 
    ) 

Демо-версия JSFiddle.

Answer 2

Я не уверен, что вы решили создать пользовательскую привязку для поиска выбранного элемента в коллекции и сохранения его в наблюдаемом?

Вы можете просто захватить событие и выяснить, выбранный пункт:

var data = [ 
    { "Id" : 0, "Name" : "Item0" }, 
    { "Id" : 1, "Name" : "Item1" }, 
    { "Id" : 2, "Name" : "Item2" }, 
    { "Id" : 3, "Name" : "Item3" }, 
    { "Id" : 4, "Name" : "Item4" }, 
    { "Id" : 5, "Name" : "Item5" }, 
    { "Id" : 6, "Name" : "Item6" }, 
    { "Id" : 7, "Name" : "Item7" } 
] 

function vm(){ 
    var self = this; 
    self.items = ko.observableArray(data); 
    self.selectedItem = ko.observable(); 
    self.selectItem = function(item){ 
     self.selectedItem(item); 
    } 
    self.select3rd = function(){ 
     self.selectedItem(self.items()[2]); 
    } 
} 

ko.applyBindings(new vm()); 

Html:

<ul data-bind="foreach: items"> 
    <li><a href="#" data-bind="text: Name, event: { focus : $parent.selectItem }, attr: { 'tabindex' : $index }"></a></li> 
</ul> 

<p>Selected item: <span data-bind="text: ko.toJSON(selectedItem)"></span></p> 

<button data-bind="click: select3rd">Select 3rd item</button> 

And the fiddle is here