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/

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

1 个答案: