Javascript knockoutjs在observableArray项更新后可见刷新
这是我的简化模型:Javascript knockoutjs在observableArray项更新后可见刷新,javascript,jquery,knockout.js,Javascript,Jquery,Knockout.js,这是我的简化模型: var GoalItem = function(id, type, name, authorId, author, children) { this.id = ko.observable(id); this.type = ko.observable(type); this.name = ko.observable(name); this.authorId = ko.observable(
var GoalItem = function(id, type, name, authorId, author, children) {
this.id = ko.observable(id);
this.type = ko.observable(type);
this.name = ko.observable(name);
this.authorId = ko.observable(authorId);
this.author = ko.observable(author);
this.children = ko.observableArray(children || []);
this.isPage = ko.computed(function(){ return type == 'page' ? true : false; }, this);
this.isFile = ko.computed(function(){ return type == 'file' ? true : false; }, this);
};
var GoalModel = function() {
this.list = ko.observableArray([
new GoalItem(1, 'page', 'Getting started', 0, '', [
new GoalItem(2, 'page', 'Getting started 1.1', 0, ''),
new GoalItem(3, 'video', 'Video', 0, '', [
new GoalItem(4, 'data', 'Data', 0, ''),
new GoalItem(5, 'test', 'Test', 0, '', [
new GoalItem(6, 'page', 'Test prep', 0, '', [
new GoalItem(7, 'video', 'Test video', 0, ''),
new GoalItem(8, 'file', 'Test file', 0, '')
])
]),
new GoalItem(9, 'page', 'Sample page', 0, '')
])
]),
new GoalItem(10, 'page', 'More data tracking', 0, '', [
new GoalItem(11, 'data', 'Data 1', 0, ''),
new GoalItem(12, 'data', 'Data 2', 0, '')
])
]);
}
一些标记使用isvisible来确定要显示哪些html片段
<div data-bind="visible: currentItem().isPage">
applicable to pages only
</div>
仅适用于页面
vs
仅适用于文件
我有一些代码,当用户点击一个GoalItem,它被呈现到一个treeview中时,就会被加载,isvisible将负责显示/隐藏
如果用户现在在UI中更改当前GoalItem的“type”属性,则不会重新触发isvisible-如果类型从“page”更改为“file”
目前,它似乎不工作,希望这个解释是有意义的,如果不是我会尝试添加更多的细节
另一方面,从阅读中,我是否必须“移除”或“替换”可观察数组中的项,以使其重新触发isvisible:binding?如果是,或者作为一个相关问题,基于this.id在ObservalArray中查找项的最佳方法是什么?请记住,该项可以是“深”的“孩子们
非常感谢您提供的任何反馈或帮助您计算的观察值将触发UI更新,但它们并不完全正确:
this.isPage = ko.computed(function(){ return type == 'page' ? true : false; }, this);
this.isFile = ko.computed(function(){ return type == 'file' ? true : false; }, this);
这些应该更像:
this.isPage = ko.computed(function() {
return this.type() == 'page' ? true : false;
}, this);
this.isFile = ko.computed(function() {
return this.type() == 'file' ? true : false;
}, this);
现在,您实际上已经访问了可观察对象的值,因此计算出的可观察对象依赖于
类型
可观察对象。当它改变时(通过设置它的值,如this.type('file');
,计算的可观测值将被重新评估,并通知所有订阅者(您的UI)。duh!这就像一个符咒:)感谢您的快速响应和这么好的框架!
this.isPage = ko.computed(function() {
return this.type() == 'page' ? true : false;
}, this);
this.isFile = ko.computed(function() {
return this.type() == 'file' ? true : false;
}, this);