javascript - KnockoutJs Visible doesn't work -

i want <td> visible or invisible depending on boolean value in javascript.

my html is:

<!-- ... --> <tbody data-bind="foreach: entries">     <tr>         <td data-bind="visible: editable()">             <a href="#" data-bind="click: $root.removeentry">remove</a>         </td>       </tr>     </tbody> <!-- ... --> 

and javascript this:

//... function tableentryviewmodel(){     editable: ko.observable(false);     //... } 

when loads data loads first entry , stops. here's error get.

uncaught typeerror: unable process binding "visible: function (){return editable() }" message: string not function

this isn't exact replica of programm, if make work i'm sure you'll me lot: http://jsfiddle.net/cupplekay/s6hwa/

ok, can see example you're trying do. i've posted modified version here:

http://jsfiddle.net/s6hwa/2/

javascript:

function tableentryviewmodel(){     var self = this;      self.editable = ko.observable(false);      self.removeentry = function (row) {         self.entries.remove(row);     };      self.entries = ko.observablearray([         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "239"},         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "240"},         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "241"}     ]); }  var model = new tableentryviewmodel();  ko.applybindings(model); 

html:

... <td data-bind="visible: $root.editable"><a href="#" data-bind="click: $root.removeentry">remove</a>    </td> ... 

note needed change binding $root.editable. if want hide "remove" on row-by-row basis, try different version:

http://jsfiddle.net/s6hwa/3/

javascript:

function tableentryviewmodel(){     var self = this;      self.removeentry = function (row) {         self.entries.remove(row);     };      self.entries = ko.observablearray([         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "239", editable: ko.observable(false)},         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "240", editable: ko.observable(false)},         {name: "hendrik", vorname: "alex", adresse: "southstreet", wohnort: "south", id: "241", editable: ko.observable(false)}     ]); }  var model = new tableentryviewmodel();  ko.applybindings(model); 

html:

... <td data-bind="visible: editable"><a href="#" data-bind="click: $root.removeentry">remove</a>    </td> ... 

note because each entry in observablearray contains editable value, don't need use $root. anymore.

hope helps.