javascript - KnockoutJS hasFocus 不起作用

Question

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

这是我的脚本

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

有什么线索吗？

Answer 1

如果notificationService是一个 observable , 你的绑定(bind)需要是

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

(调用括号在 notificationService 之后)。另外，您需要添加 tabindex到 <a>标记，因为您的 anchor 不是链接(它没有 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>