Javascript 焦点输入动态添加到淘汰赛中的observableArray

在KO 3.0.0.beta（我几乎可以肯定它在2.3中也是一样）中，我尝试将新行添加到动态创建的表中：

HTML

<div id="root">
    <table>
        <tbody data-bind="foreach: events">
            <tr>
                <td>
                    <input type="text" data-type="name" data-bind="value: name, css: {hidden: !editing()}, hasFocus: true">
                </td>
                <td>
                    <input type="text" data-type="method" data-bind="value: age, css: {hidden: !editing()}">
                </td>
            </tr>
        </tbody>
    </table>
</div>

而且它几乎可以工作

我成功地创建了行-这是siple的一部分，但就我的一生而言，我无法在创建的raw中进行第一次输入以集中精力

---

有什么想法吗（我已经考虑了很多建议，在上面的设置中没有一个有效）？

我可能没有抓住要点，但是为什么不把hasFocus设置为editing（），而不是true呢

<div id="root">
    <table>
        <tbody data-bind="foreach: events">
            <tr>
                <td>
                    <input type="text" data-type="name" data-bind="value: name, css: {hidden: !editing()}, hasFocus: editing()">
                </td>
                <td>
                    <input type="text" data-type="method" data-bind="value: age, css: {hidden: !editing()}">
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Fiddle

避免将jQuery与Knockout这样的东西混合在一起通常是值得的。在大多数情况下，淘汰赛也有选择。在您的情况下，要查看的是和

查看您的代码，我会将视图更新为以下内容：

self.onBlurAgeEdit = function (item) {
    // Unwrap the array
    var myEvents = self.events();

    // Check if this function was called for the *last* item in the array
    if (myEvents[myEvents.length-1] === item) {

        // Make sure the last item isn't in edit mode anymore
        item.editingAge(false);

        // Push a new item that has *name* in edit mode
        self.events.push({name: ko.observable(''),
                          age: ko.observable(''),
                          editingName: ko.observable(true),
                          editingAge: ko.observable(false)});
    }
};

另外，如果用户按tab键时正在创建新行的“MS Word样式”，还可以绑定到“keypress”事件并检查正确的键代码（用于tab）

注意，我已将

编辑

可观察对象拆分为两个可观察对象：

editingName

和

editingAge

每当年龄

输入模糊时，
onBlurAgeEdit
功能将启动。看起来是这样的：

self.onBlurAgeEdit = function (item) {
    // Unwrap the array
    var myEvents = self.events();

    // Check if this function was called for the *last* item in the array
    if (myEvents[myEvents.length-1] === item) {

        // Make sure the last item isn't in edit mode anymore
        item.editingAge(false);

        // Push a new item that has *name* in edit mode
        self.events.push({name: ko.observable(''),
                          age: ko.observable(''),
                          editingName: ko.observable(true),
                          editingAge: ko.observable(false)});
    }
};

请注意，为了使
hasFocus
绑定发挥良好的性能，可观察对象可以使用

看看这一切都在起作用。
你把jQuery和KO混为一谈，这注定要失败。添加一个可观察的IsFocus，将其与hasFocus bindingSecond@Anders绑定。你应该把它变成一个答案。它可能不是OP想要的，但它是实际问题的最干净的解决方案，而且：其他人可能也会发现它很有用。@Anders jquery用于事件绑定。完全正交。我愿意接受建议，所以请回答这个问题。我试着用isFocused。没法用。你试过自己的小提琴吗？它不起作用。谢谢你的回复。我一定是误会了。。。那么它应该如何工作呢？添加的新行应该聚焦第一个输入字段-这样用户可以在按下前一行上的“tab”后立即键入。我一定解释得很糟糕。你的作品和我的原作一模一样。这不好。在最后一个可见输入上按tab键后，应添加一个新行，该行中的第一个输入应聚焦并准备好键入。另外，您可以看到，我在上面的代码中使用了
hasFocus
。令我惊讶的是，Webkit不起作用。但我没有时间让它在Firefox上运行，一个直接的油门扩展似乎不起作用。欲了解更多信息，您可能需要遵循上述链接并进行更多调查。