knockoutjs二 observableArray的使用
上次忘记讲了,viewmodel可以有好几仲形式。
1.var viewModel={}
这样写对应的绑定为 ko.applyBindings(viewModel);
2. function ViewModel(){}
这样写的把绑定方式是 var viewMode=new ViewModel(); ko.applyBindings(viewModel);
obervableArray的用法如下:
1 | <div data-bind="foreach:{data:myObservableArray, as :'item'} "> |
在使用时我们在model的内部可以使用this.myObservableArray 来获取这个操作进行操作,在model的外部则可以使用model.myObservableArray来获取这个方法进行操作。其实model.myObservableArray这是一个方法,所以其实dom中绑定是可以这样<div data-bind="foreach:{data:myObservableArray(), as :'item'} ">
如下图
这证明了他是一个方法。
而我用console给他添加了一个元素。
就立即在view中显示了。如下:
这次的例子中用到了foreach绑定,先不介绍,只要把它当做一个循环就可以了。
可以在obervableArray中初始化数据的,不一定要push进去
1 | var anotherObservableArray = ko.observableArray([ |
可以用操作数组的方式操作它,比如:
1 | model.myObservableArray.push("1"); |
官网说model.myObservableArray.push(“1”);这个方法比这样调用原生js 的myObservableArray().push(‘1’)的array的潜在push要好,但是我发现调用myObservableArray().push(‘1’)这个方法调用后view不会改变,也即是说根本没有通知到view进行改变(不知道是不是一个bug)。
- knockoutjs给出了对于observableArray的这些操作:pop, push, shift, unshift, reverse, sort, splice。就个原生js中数组的操作一样。
- knockoutjs还增加了一些有用的方法如:remove and removeAll,
remove()
中传入一个方法如:remove( function (item) { return item.age < 18; } )
就是去除所有item的age小于18的,并返回一个剩余元素的数组。removeAll( ['Chad', 132, undefined] )
:就是去除所有传入的数组中的元素,并返回一个包含剩余元素的数组。
代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。