淘汰赛 JS：`hasFocus` 总是有焦点

Question

背景

我有一个单视图模型和两个模型。对于每个模型，我都在尝试将 name 属性绑定到 dom。每个名称都有默认值，但我希望用户能够编辑这些值。在 Knockout 文档之后，我使用了 hasFocus 方法。我的问题是，点击时，我可以编辑，但是当我点击出去时，焦点不会改变，我的数组也不会更新。看起来我的模型editable 属性永远不会设置回false。见下面对应的 HTML 和 JS。

那我做错了什么？这是我用于故障排除的清单（无济于事）...

1. 确保名称是可观察的。
2. 确保editing 是可观察的。
3. 确保我的edit 函数将editing 设置为true。
4. 确保editing 默认为false
5. 确保<input> 具有value 绑定。
6. 确保<i> 具有text 绑定。
7. 确保事件处理程序绑定到editing 的值

JSBin：http://jsbin.com/fehoq/117/edit

JS

function StudentModel(fullName) {
    var _this = this;
    this.fullName = ko.observable(fullName);
    this.editing = ko.observable(false);
    this.edit = function() { 
        _this.editing(true); 
        console.log(_this.editing());
    }; 
    ...
}

HTML

<tbody>
  <!-- ko foreach: students -->
    <tr>
        <td>
          <input data-bind="value: fullName()  + ' ' + ($index() + 1), visible: editing(), hasFocus: editing()"/>
          <i data-bind="visible: !editing(), text: fullName() + ' ' + ($index() + 1), click: edit">&nbsp;</i>
        </td>  
...

       

Answer 1

您可能希望将hasFocus 绑定到可观察对象本身，以便可以将错误值写回给它。所以，你会想要：

hasFocus: editing 而不是hasFocus: editing()

在后者中，绑定只接收值，无法返回到可观察对象写入。