我有一个模板，它使用 hasFocus 类似于文档中的示例:http://knockoutjs.com/documentation/hasfocus-binding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>field test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {
margin-top: 1em;
}
</style>
<script src="https://cdn.jsdelivr.net/g/jquery@2.2.2,bootstrap@3.3.6,knockout@3.4.0"></script>
<script>
$(function() {
var VM = function() {
var model = {};
model = {
one: ko.observable(false),
two: ko.observable(false)
};
this.model = model;
};
ko.applyBindings(new VM());
});
</script>
</head>
<body>
<script type="text/template" id="first-template">
<input type="text" class='form-control' data-bind="hasFocus: model.one">
<p>one has<span data-bind="visible: !model.one()"> not got</span> focus now</p>
<input type="text" class='form-control' data-bind="hasFocus: model.two">
<p>two has<span data-bind="visible: !model.two()"> not got</span> focus now</p>
</script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div data-bind="template: { name: 'first-template' }"></div>
<!-- if I uncomment the next line, it stops working... -->
<!-- <div data-bind="template: { name: 'first-template' }"></div> -->
</div>
</div>
</div>
</body>
</html>
一切都按预期工作，在进入和离开 field 时正确更新模型上的焦点状态。但是，如果我第二次应用该模板，除了焦点状态外，该模板似乎工作正常。这是不受支持的，还是我实现错误？如何多次使用模板，仍然使用焦点状态？
最佳答案
浏览器不能有两个<input>具有焦点的元素。 hasFocus bind 将尝试为两个元素提供焦点状态。您可以使用 event 来规避此行为两者的绑定(bind) focus和 blur事件:
data-bind="event: {
focus: function() {
model.one(true)
},
blur: function() {
model.one(false)
}
}"
查看此 fiddle 以获得代码的工作示例:https://jsfiddle.net/77meefmf/
关于javascript - 模板中被调用两次的 Knockout JS `hasFocus`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36358666/