I've got a very simple View Model:

var ViewModel = function() {
    this.showRow = ko.observable(false);
    this.toggleVisibility = function() {
        if(this.showRow == true){
            this.showRow = false;
        }
        else{
            this.showRow = true;
        }
        alert('showRow is now '+this.showRow); //only here for testing
    };
};

with equally simple markup:

<a href="#" data-bind="click: toggleVisibility">Toggle</a>
<br />
<table>
    <tr data-bind="visible: showRow">Some Text</tr>
</table>

My problem is, that when the link is clicked, the alert box shows (displaying the correct value - true/false)

However, the visible binding on the tr element doesn't seem to work - either initially (the row should be invisible on load) nor when the value of showRow toggles.

jsFiddle of above- /

I've got a very simple View Model:

var ViewModel = function() {
    this.showRow = ko.observable(false);
    this.toggleVisibility = function() {
        if(this.showRow == true){
            this.showRow = false;
        }
        else{
            this.showRow = true;
        }
        alert('showRow is now '+this.showRow); //only here for testing
    };
};

with equally simple markup:

<a href="#" data-bind="click: toggleVisibility">Toggle</a>
<br />
<table>
    <tr data-bind="visible: showRow">Some Text</tr>
</table>

My problem is, that when the link is clicked, the alert box shows (displaying the correct value - true/false)

However, the visible binding on the tr element doesn't seem to work - either initially (the row should be invisible on load) nor when the value of showRow toggles.

jsFiddle of above- http://jsfiddle/alexjamesbrown/FgVxY/3/

• javascript
• knockout.js

• 10 this.showRow = means you're overwritting the "observable" property. The property is a function, not just a value, when you're using the observable. – Jim D'Angelo Commented Nov 26, 2012 at 18:28
• 1 To add to James D'Angelo's point, if you want to update the value of an observable property, pass in the value as a parameter to the property. 'this.showRow(false)'; – Quickhorn Commented Sep 23, 2013 at 21:54

1 Answer 1

You need to modify your html as follows:

<table>
    <tr data-bind="visible: showRow"><td>Some Text</td></tr>
</table>

And JavaScript as follows:

var ViewModel = function() {
    var self = this;
    self.showRow = ko.observable(false);
    self.toggleVisibility = function() {

        self.showRow(!self.showRow());
        alert('showRow is now ' + self.showRow());
    };
};

ko.applyBindings(new ViewModel());

Syntax to set the value to observable property is: self.showRow(value);

If need to have tags inside of tags.

I've also modified your fiddle to simplify the javascript and follow newer code practices with regard to "this". See http://jsfiddle/FgVxY/4/