Knockout visible binding not working

javascript, knockout.js

Solution

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.net/FgVxY/4/

Problem

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.net/alexjamesbrown/FgVxY/3/

Original source