CODEWITHSUNDEEP
javascriptjqueryknockout.js
Andre
Andre

Reputation: 820

knockoutjs isvisible refresh after observableArray item has been updated

Here is my simplified model:

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

and some markup uses isvisible to determine which pieces of html to show

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

vs. 

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

I have some code that when a user clicks on a GoalItem which is rendered into a treeview will load and the isvisible will take care of show/hide

If the user now makes a change in the UI for the "type" property of the current GoalItem should that not re-trigger the isvisible - so if type changes from "page" to "file"

Currently it does not appear to be working, hopefully this explanation makes sense, if not I will try to add more detail.

On another note, from reading, would i instead have to "remove" or "replace" the item in the observable array in order to get it to re-trigger the isvisible: binding"? - and if so - or as a related question - what is the best way to find an item in observableArray based on the this.id - baring in mind that the item can be "deep" within the children?

any feedback or help is greatly appreciated

Upvotes: 1

Views: 537

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

You computed observables will trigger UI updates, but they are not quite correct:

    this.isPage = ko.computed(function(){ return type == 'page' ? true : false; }, this);
    this.isFile = ko.computed(function(){ return type == 'file' ? true : false; }, this);

These should look more like:

    this.isPage = ko.computed(function() { 
        return this.type() == 'page' ? true : false; 
    }, this);

    this.isFile = ko.computed(function() { 
        return this.type() == 'file' ? true : false; 
    }, this);

Now, you have actually accessed the observable's value, so the computed observable has a dependency on the type observable. When it changes (by setting its value like this.type('file');, the computed observable will be re-evalauted and any subscribers (your UI) will be notified.

Upvotes: 3

Related Questions