编辑最后一行时自动向表添加新行

Question

当用户开始在最后一行中输入时，我试图在表的末尾添加一个新行。 viewmodel 看起来像这样：

function tableRow(number, ownerViewModel) {  
    this.number = ko.observable(number);
    this.remove = function () { ownerViewModel.tableRows.destroy(this); }

    ko.dependentObservable(function () {
        var curval = this.number();
        var rows = ownerViewModel.tableRows();
        if (rows.length > 0) {
            if (curval != '' && this == rows[rows.length - 1]) {
                ownerViewModel.addNewRow();
            }
        }
    }, this);
}

function tableRowsViewModel() {
    var that = this;
    this.tableRows = ko.observableArray([]);
    this.addNewRow = function () {
        this.tableRows.push(new tableRow('', that));
    }
    this.addNewRow();
}

$(document).ready(function () {
    ko.applyBindings(new tableRowsViewModel());
});

这是 html：

<table>
    <thead>
        <tr>
            <th>
                Number
            </th>
            <th>
            </th>
        </tr>
    </thead>
    <tbody data-bind="template:{name:'tableRow', foreach: tableRows}">
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">
                <button type="button" data-bind="click: addNewRow">
                    add row
                </button>
            </td>
        </tr>
    </tfoot>
</table>
<script id="tableRow" type="text/html">
    <tr>
        <td>
            <input type="text" style="width:40px;" data-bind="value: number, valueUpdate: 'keyup'" />
        </td>
        <td>
            <button type="button" data-bind="click: function(){ $data.remove(); }">
                delete
            </button>
        </td>
    </tr>
</script>

我还在 tableRow ko.dependentObservable 函数中插入了 alert() ：

ko.dependentObservable(function () {
    alert('test');
    var curval = this.number();...

当 tableRows 数组包含 2 个元素时，这个函数似乎被触发了 5 次，当数组中有 3 个元素时为 6 次，依此类推。

我这样做对吗？

Answer 1

每次添加行时，您添加到每个行对象的 dependentObservable 都会触发，因为它们依赖于 tableRows。因此，每个人都在做一些工作来确定它们是否是最后一行。如果是最后一行，则添加新行。

另一种方法是使用单个 dependentObservable 来表示最后一行的值。然后，您可以订阅该 dependentObservable 的更改，检查它是否有值，并在必要时添加一行。它看起来像： http://jsfiddle.net/rniemeyer/F5F8S/

另外，这里是我从 KO 论坛获得的示例显示添加一行，如果最后两行为空，还删除最后一行，以防有帮助：http://jsfiddle.net/rniemeyer/MzGDr/