3

在 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

它几乎可以工作。

我在行创建方面取得了成功 - 这是最简单的部分，但对于我的生活，我无法在创建的原始数据中做出第一个输入来集中注意力。

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

4

2 回答 2

0

避免像这样将 jQuery 与 Knockout 混合使用通常是值得的。在大多数情况下，Knockout 也有选项。在您的情况下，要查看的是event binding和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”事件并检查正确的键码（用于选项卡）。

请注意，我已将editingobservable 拆分为两个 observable：editingName和editingAge.

只要年龄模糊，该功能onBlurAgeEdit就会触发。input它看起来像这样：

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，您需要限制observables 以使hasFocus绑定更好。

在这个小提琴中看到所有这些。

于 2013-10-23T11:06:53.743 回答
0

我可能错过了重点，但为什么不将你的 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>

在这里提琴

于 2013-10-23T07:36:04.630 回答