如何使用 Knockout.js 在特定位置将项目添加/插入到 ObservableArray

Posted 2023-02-22

【中文标题】如何使用 Knockout.js 在特定位置将项目添加/插入到 ObservableArray

【英文标题】：How to add/insert an item into an ObservableArray at a certain position with Knockout.js

【发布时间】：2011-11-11 04:28:54

【问题描述】：

我发现的所有淘汰示例似乎都在 ObservableArray 的末尾添加了一个新项目，使用如下：

viewModel.SomeItems.push(someNewItem);

当然，这会将项目放在数组的末尾。

如何在 ObservableArray 的某个位置添加一个项目？

例如。类似：

viewModel.SomeItems.push(someNewItem, indexToInsertItAt);

【参考方案1】：

你应该可以使用原生 javascript splice 方法 -

viewModel.SomeItems.splice(2,0,someNewItem);

文档在这里 - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

此处的示例（不是特定于淘汰赛的）-How to insert an item into an array at a specific index?

来自 Knockout 文档 -

对于修改数组内容的函数，比如push和 splice, KO 的方法自动触发依赖跟踪 机制，以便所有注册的侦听器都收到更改通知， 并且您的 UI 会自动更新。

【讨论】：

谢谢。拼接工作。对于淘汰用户，如果您想根据现有项目查找索引以插入新项目，则 ko.utils.arrayIndexOf 也很有用。

这不适用于稀疏数组，至少它不适用于我在 chrome 中。请参阅下面的答案

【参考方案2】：

用于淘汰赛

viewModel.SomeItems.unshift(someNewItem);

另请参阅：http://knockoutjs.com/documentation/observableArrays.html

【讨论】：

这会在数组的开头插入项目，因此如果您想在中间的位置插入项目，则无济于事。

我不知何故错过了将其插入数组中任何位置的部分。是的，这仅在您想插入开头时才有效。对此感到抱歉。

【参考方案3】：

我制作了这个扩展功能，对我来说效果很好。如果我添加到稀疏数组的末尾，Splice 对我不起作用。

ko.observableArray.fn.setAt = function(index, value) 
    this.valueWillMutate();
    this()[index] = value;
    this.valueHasMutated();

这甚至适用于：

var a = ko.observableArray(['a', 'b', 'c']);
a.setAt(42, 'the answer');

【讨论】：

如果你想做 insertAt 而不是 setAt，只需将 this()[index] = value; 切换到 this.splice(index, 0, value);。谢谢亚当！