Knockout.js 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

observableArray

如果我们需要探测和响应一个集合对象的变化,就应该用observableArray。在很多场景下,它都非常有用,比如要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行添加和删除。

var myObservableArray = ko.observableArray();    // 初始化一个空数组
myObservableArray.push('Some value');            // 向数组中添加数据

当然也可以在初始化时对数组赋值:

var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

我们可以像获取普通的observable的值一样,只需要调用无参函数就可以获取自身的值了。 例如,

alert('The array length is ' + myObservableArray().length); //数组的长度
alert('The first element is ' + myObservableArray()[0]); //数组的第一个元素

另外KO也提供了一些操作数组的方法:

myObservableArray.push('Some new value') 在数组末尾添加一个新项;

myObservableArray.pop() 删除数组最后一个项并返回该项;

myObservableArray.unshift('Some new value') 在数组头部添加一个项;

myObservableArray.shift() 删除数组头部第一项并返回该项;

myObservableArray.reverse() 翻转整个数组的顺序;

myObservableArray.sort() 给数组排序,等等。