Filtering observableArray
Filtering observableArray
本文关键字:observableArray Filtering 更新时间:2023-09-26
我在用knockout.js 过滤可观察数组时遇到了问题
我的js:
包含数据的数组
var docListData = [
{ name: "Article Name 1", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) },
{ name: "Article Name 2", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) },
{ name: "Article Name 3", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) }
];
视图模型:
var viewModel = function() {
var self = this;
用数据填充可观测阵列
self.docList = ko.observableArray(
ko.utils.arrayMap(docListData, function (item) {
return item;
})
);
self.appendableData = ko.observableArray([]);
在可观察阵列中创建附加参数
for (var i=0; i < self.docList().length; i++){
self.docList()[i].type = "document";
self.docList()[i].id = i;
self.docList()[i].pos = ko.observable(-1);
// self.docList()[i].pos = -1;
self.appendableData().push(self.docList()[i]);
};
更改我的可观察数组中的附加值并将更改记录到控制台的函数
toggleChecked = function (){
this.checked(!this.checked());
if (this.checked() === true){
this.pos = self.position; // changes value, but doesn't affect target array
self.appendableData()[this.id].pos = self.position; //second try, same result
self.position++;
console.log("this.pos",this.pos);
console.log("this id: ", this.id);
} else if(this.checked() === false) {
this.pos = self.position;
self.position--;
console.log("this.pos",this.pos);
console.log('nope');
};
console.log("position for next: ",self.position);
console.log(self.appendableData());
console.log(self.appendableDataToView());
};
手动更改影响目标阵列
self.appendableData()[2].pos =2; // this affects target array
过滤函数返回一个空数组:
self.appendableDataToView = ko.computed(function () {
return ko.utils.arrayFilter(self.appendableData(), function (item) {
return item.pos >= 0;
});
});
我的html代码:
<div class="list-wrapper">
<ul class="unstyled" data-bind="if: docList().length > 0">
<li data-bind="foreach: docList">
<label class="checkbox" data-bind="click: toggleChecked">
<p data-bind="text: name"></p>
<span data-bind="text: info"></span>
</label>
</li>
</ul>
</div>
首先,我认为您使用pos
属性的方式不对。它是可观察的,所以你应该以以下方式分配它:
self.appendableData()[2].pos(2);
并且在您的过滤功能中正确检索值:
return item.pos() >= 0;
此外,我建议您使用淘汰投影库(https://github.com/SteveSanderson/knockout-projections)-效率更高:
self.appendableDataToView = self.appendableData.fitler(function (item) {
return item.pos >= 0;
});
相关文章:
- observablearray KnockoutJs中的对象
- Filtering observableArray
- 过滤observableArray时出现问题
- 检测observableArray是否发生变化
- UI中未更新Knockout ObservableArray
- 自定义过滤淘汰js observableArray
- KNOCKOUT js observableArray 不起作用
- ko observablearray:推送和直接分配之间的区别
- 嵌套的JSON数组和Knockout observableArray
- 无法将项添加到observableArray
- KNOCKOUT ko.observableArray 不会刷新视图
- 在Knockoutjs中设置计算对象的observableArray的更好方法
- 访问observableArray中的非对象
- ObservableArray.push()触发点击事件
- 将JSON映射到observableArray时出错
- Knockoutjs计算未从observableArray更新
- observableArray is not defined
- 可以't get return Array插入到knockoutjs observableArray中
- 从knockoutJS中的observableArray中删除Self
- 用新数据替换observableArray