Visible snap knockout not working

Question

I have 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 the same 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 I click on the link, a warning window appears (displaying the correct value - true / false)

However, the visible binding to the tr element does not seem to work - either initially (the line should be invisible at boot), or when the showRow value showRow switched.

jsBuilt in above http://jsfiddle.net/alexjamesbrown/FgVxY/3/

Answer 1

You need to change 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()); 

The syntax for setting the value for the observed property is: self.showRow(value);

If you need tags inside tags.

I also modified your script to simplify javascript and follow new code rules regarding "this". See http://jsfiddle.net/FgVxY/4/