如何通过添加到 KnockoutJs 中上一行的项目在列表中追加新行答案

【问题标题】：How do I append a new row in a list by adding to the item of the previous row in KnockoutJs如何通过添加到 KnockoutJs 中上一行的项目在列表中追加新行
【发布时间】：2011-07-26 03:07:48
【问题描述】：

如果我在 KnockoutJs 中有一个模板，它是一个“foreach”模板，当我将下一位数据“推送”到网格中显示的可观察数组上时，我如何确保该列的值是前一行+ 1。

例如（简体）

        Col1
Row 1   5     [ Add Button ]
Row 2   6   <-- auto populated (+1)

模型（简化）：

viewModel = {
   ...
   addRow: function() {                                                         
                this.Rows.push ({ Col1:0 }) 
  }
}

我不知何故需要访问前一行并将该数据推送 + 1，但是当我检查 viewModel.Rows 时，没有计数或索引器。我如何访问这些数据？

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

您应该能够通过将添加按钮绑定到传递当前 Col1 值的匿名函数来做到这一点。

应该是这样的：

<script id="itemsTmpl" type="text/html">
    <tr>
        <td data-bind="text: id"></td>
        <td>
            <button data-bind="click: function() { viewModel.addItem(id); }">Add Item</button>
        </td>
    </tr>
</script>

使用 addItem 函数如下：

var viewModel = {
    items: ko.observableArray([{id: 1}]),
    addItem: function(previousId) {
        this.items.push({
            id: previousId + 1
        });
    }
};

示例：http://jsfiddle.net/rniemeyer/6gETk/

这可能不是您的应用所需要的，但该技术应该可以让您将必要的数据传递给您的绑定函数。

【讨论】：

太好了，唯一的问题是我的按钮在表格的页脚中，而不是在每一行中，而不是在模板中。我不知道如何将最后一行的数据绑定到页脚，所以我可以 +1。有任何想法吗？我是绑定页脚模板，还是尝试对数据进行索引？
这样的内容是否足够：jsfiddle.net/rniemeyer/Anzwj。所以，addItem 看起来像： addItem: function() { var lastId = this.items()[this.items().length-1].id; this.items.push({id: lastId+1}); }
完美！它现在的工作就像一种享受。感谢您的帮助，非常感谢。