Question

这是我的简化模型：

        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, '')
            ])
        ]);
        }

并且可以使用某些标记来确定要显示哪些html

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

VS。

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

我有一些代码，当用户点击一个渲染到树视图中的GoalItem时，会加载并且isvisible将负责显示/隐藏

如果用户现在在UI中对当前GoalItem的“type”属性进行了更改，那么不应该重新触发isvisible - 所以如果类型从“page”更改为“file”

目前它似乎没有用，希望这个解释有意义，如果不是，我会尝试添加更多细节。

另一方面，从阅读开始，我是否必须“删除”或“替换”可观察数组中的项目，以使其重新触发isvisible：binding“？ - 如果是 - 或者一个相关的问题 - 根据this.id在observableArray中找到一个项目的最佳方法是什么 - 请记住该项目可以在孩子中“深入”？

非常感谢任何反馈或帮助

Answer 1

您计算的observable将触发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');，计算的observable将被重新标记，并且将通知任何订阅者（您的UI）。

observableArray项目更新后，knockoutjs isvisible refresh

1 个答案: