在淘汰赛中将焦点输入动态添加到 observableArray

Question

在 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>

JavaScript

var $root = $('#root');

$root.on('blur', 'table input', function(event) {
    var data = ko.dataFor(event.target), 
        context = ko.contextFor(event.target),
        $input = $(event.target), 
        newData;

    data.editing(false);

    if($input.closest('td').is(':last-child') && $input.closest('tr').is(':last-child')) {
        newData = {
            name: '', 
            age: '', 
            editing: ko.observable(false)
        };

        context.$root.events.push(newData);
        newData.editing(true);  
    }
});

var data = {                
    events: [
        {name: 'aaa', age: '22', editing: false},
        {name: 'bbb', age: '33', editing: false},
        {name: 'ccc', age: '44', editing: false}
    ]
};

var mapping = {
    events: {
        key: function(data) {
            return ko.unwrap(data.name);
        }
    }
};

var observable = ko.mapping.fromJS(data, mapping);

ko.applyBindings(observable, $root[0]);

JSFiddle

它几乎有效。

我在行创建方面很成功 - 这是最简单的部分，但在我的一生中，我无法使创建的原始数据中的第一个输入成为焦点。

有什么想法（我提出了很多建议，但在上述设置中没有一个可行）？

Answer 1

我可能没有抓住重点，但为什么不将你的 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>

小提琴here

Answer 2

避免像这样将 jQuery 与 Knockout 混合使用通常是值得的。在大多数情况下，Knockout 也有选项。在您的情况下，要查看的是 the event binding 和 the hasFocus binding。

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

<tr>
    <td>
        <input type="text" data-bind="value: name, 
                                      hasFocus: editingName">
    </td>
    <td>
        <input type="text" data-bind="value: age, 
                                      hasFocus: editingAge, 
                                      event: { blur: $root.onBlurAgeEdit }">
    </td>
</tr>

顺便说一句，如果您在用户按下选项卡时在“MS Word 样式”创建新行之后，您还可以绑定到“keypress”事件并检查正确的键码（用于选项卡）。

请注意，我已将 editing 可观察对象分成两个可观察对象：editingName 和 editingAge。

只要年龄input 模糊，函数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)});
    }
};

请注意，对于 Firefox you'll need to throttle，可观察对象使 hasFocus 绑定发挥得很好。

在this fiddle 中查看所有这些工作。