javascript - knockout.js 中的双向焦点绑定(bind)

Question

我有这个自定义绑定(bind)，它使用应用到的元素的聚焦子元素的数据更新可观察对象:

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

这比标准的 hasFocus 绑定(bind)更适合我希望页面的其他部分显示有关焦点项目的信息的用例:

<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>

现在我想使它成为双向绑定(bind)，这样我就可以从我的脚本代码中更改 selectedItem，并使正确的列表元素成为 $.focus()< 的焦点。有什么想法可以扩展绑定(bind)以双向工作吗？

我意识到我可能需要使用“控制后代绑定(bind)”方法，并且无法将绑定(bind)应用于与 foreach 绑定(bind)相同的元素，但这没关系。我遇到的问题是调用更新函数时子元素似乎没有绑定(bind)(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 .