Question

我有一个模板，使用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>

这一切都按预期工作，在进入和离开现场时正确更新模型上的焦点状态。但是，如果我第二次应用模板，模板似乎可以正常工作，但焦点状态除外。这是不受支持的，还是我实施错误？如何多次使用模板，仍然使用焦点状态？

Answer 1

浏览器不能有两个具有焦点的<input>元素。 hasFocus绑定将尝试为两个元素提供焦点状态。您可以对event和focus事件使用blur绑定来规避此行为：

data-bind="event: { 
  focus: function() { 
    model.one(true) 
  }, 
  blur: function() { 
    model.one(false) 
  } 
}"

查看这个小提琴，了解您的代码的工作示例：https://jsfiddle.net/77meefmf/

Answer 2

您需要确保模板的每个副本都有自己的viewmodel。 hasFocus绑定意味着将焦点状态表示为单个字段。如果将它绑定到多个字段，则结果将是错误的。

Knockout JS`hasFocus`在模板中被调用两次

2 个答案: