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


75

我发现的所有敲除示例似乎都使用类似以下方法在ObservableArray的末尾添加了一个新项目:

viewModel.SomeItems.push(someNewItem);

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

如何在某个位置将项目添加到ObservableArray?

例如。就像是:

viewModel.SomeItems.push(someNewItem, indexToInsertItAt);

Answers:


83

您应该可以使用本机JavaScriptsplice方法-

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

此处的文档-https: //developer.mozilla.org/zh-CN/JavaScript/Reference/Global_Objects/Array/splice

此处的示例(并非特定Knockout)-如何在特定索引处将项目插入数组?

从淘汰赛文档-

对于修改数组内容的函数(例如推和拼接),KO的方法会自动触发依赖项跟踪机制,以便将更改通知所有注册的侦听器,并自动更新您的UI。


7
谢谢。拼接工作。对于淘汰用户,如果要查找索引以基于现有项目插入新项目,ko.utils.arrayIndexOf也很有用。
马克·罗宾逊

1
这不适用于稀疏数组,至少在chrome中不适用于我。请在下面查看我的答案
亚当·泰根

23

用于淘汰赛

viewModel.SomeItems.unshift(someNewItem);

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


15
这会将项目插入数组的开头,因此如果您想在中间插入项目,则无济于事。
马克·罗宾逊

1
我不知何故错过了有关将其插入数组中任何位置的部分。是的,仅当您要插入开头时才起作用。对于那个很抱歉。
Travis Cavanaugh 2012年

12

我做了这个扩展功能,对我来说很好用。如果我要添加到稀疏数组的末尾,则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');

2
如果要执行insertAt而不是setAt,只需切换this()[index] = value;到即可this.splice(index, 0, value);。谢谢亚当!
Brian S
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.