javascript - knockout JS : `hasFocus` always has Focus

Question

背景

我有一个 View 模型和两个模型。对于每个模型，我尝试将名称属性绑定(bind)到 dom。每个名称都有默认值，但我希望用户能够编辑这些值。按照 knockout 文档，我选择了 hasFocus方法。我的问题是，单击时，我可以编辑，但是当我单击时，焦点不会改变，并且我的数组不会更新。它看起来像我的模型 editable属性永远不会设置回 false 。请参阅下面相应的 HTML 和 JS。

那我做错了什么？这是我用来排除故障的 list (无济于事)...

1. 确保名称可观察。
2. 确保 editing是可以观察到的。
3. 确保我的 edit功能集editing至true .
4. 确保 editing默认为false
5. 确保 <input>有一个value绑定(bind)。
6. 确保 <i>有一个text绑定(bind)。
7. 确保事件处理程序绑定(bind)到 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 绑定(bind)到可观察对象本身，以便可以将 false 值写回其中。所以，你会想要:

hasFocus:编辑而不是hasFocus:editing()

在后者中，绑定(bind)仅接收值，无法返回可观察对象以对其进行写入。