KnockoutJS hasFocus 不起作用答案

【问题标题】：KnockoutJS hasFocus doesn't workKnockoutJS hasFocus 不起作用
【发布时间】：2018-06-18 14:52:45
【问题描述】：

我似乎无法弄清楚如何使这个东西工作，无论我把这个绑定放在哪里都不会工作

这是我的脚本

<a class="dropdown-toggle expanded" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" data-bind="hasFocus:notificationService.aaaa">

this.aaaa = ko.observable(false);

还有我的html

<span data-bind="text:notificationService.aaaa"></span>

其中 notificationService 是一个通过 Require 传递的对象。其他一切正常，但不是这个 hasFocus

有什么线索吗？

【问题讨论】：

为什么要绑定text？
我忘了上传hasFocus，现在在@JasonSpake
看起来您正在将引导程序与淘汰赛混合使用，这通常需要自定义绑定才能工作，因为引导程序会从 DOM 中删除元素并将其替换为自己的标记，并且不会保留您的绑定。
aaaa 成员是 observable 吗？
@JasonSake 我试图删除所有与引导程序相关的属性，但没有任何改变

标签： javascript knockout.js data-binding binding

【解决方案1】：

如果notificationService 是observable，您的绑定需要是

data-bind="hasFocus:notificationService().aaaa"

（在notificationService 之后带有调用括号）。此外，您需要将tabindex 添加到<a> 标记中，因为您的锚不是链接（它没有href），因此通常无法获得焦点。

const vm = {
  notificationService: ko.observable({
    aaaa: ko.observable(false)
  })
};

ko.applyBindings(vm);

setTimeout(() => {
  vm.notificationService().aaaa(true);
}, 800);

a:focus {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<a class="dropdown-toggle expanded" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" data-bind="hasFocus:notificationService().aaaa" tabindex="0">Anchor</a>
<span data-bind="text:ko.toJSON(notificationService)"></span>

【讨论】：