gpt4 book ai didi

javascript - knockoutjs isvisible refresh after observableArray item has updated

转载 作者:行者123 更新时间:2023-11-30 13:22:56 25 4
gpt4 key购买 nike

这是我的简化模型:

        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>

对比

<div data-bind="visible: currentItem().isFile">
applicable to files only
</div>

我有一些代码,当用户点击呈现到 TreeView 中的 GoalItem 时将加载,而 isvisible 将负责显示/隐藏

如果用户现在在 UI 中为当前 GoalItem 的“类型”属性进行了更改,那么应该不会重新触发可见 - 所以如果类型从“页面”更改为"file"

目前它似乎没有工作,希望这个解释是有道理的,如果没有我会尝试添加更多细节。

另一方面,根据阅读,我是否必须“删除”或“替换”可观察数组中的项目才能使其重新触发 isvisible: 绑定(bind)“? - 如果是这样 - 或者作为一个相关的问题 - 根据 this.id 在 observableArray 中查找项目的最佳方法是什么 - 请记住该项目可能在 child 中“深”?

非常感谢任何反馈或帮助

最佳答案

您计算的可观察对象将触发 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);

现在,您实际上已经访问了 observable 的值,因此计算的 observable 依赖于 type observable。当它发生变化时(通过将其值设置为 this.type('file');,计算的可观察对象将被重新评估,并且所有订阅者(您的 UI)都将收到通知。

关于javascript - knockoutjs isvisible refresh after observableArray item has updated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9558144/

25 4 0