javascript - how do i toggle the visibility of an html element using knockoutjs ? -

i using knockoutjs v3.1.0. trying build master-detail view. problem having elements not showing (though hiding). mock code @ http://jsfiddle.net/jwayne2978/qc4rf/3/

this html code.

<div data-bind="foreach: users"> <div>row</div> <div data-bind="text: username"></div> <div data-bind="visible: showdetails">     <div data-bind="text: address"></div> </div> <div>      <a href="#"          data-bind="click: $root.toggledetails">             toggle div     </a> </div> 

this javascript code

var usersdata = [ { username: "test1", address: "123 main street" },   { username: "test2", address: "234 south street" } ];  var usersmodel = function (users) {     var self = this;     self.users = ko.observablearray(         ko.utils.arraymap(users, function (user) {             return {                 username: user.username,                 address: user.address,                 showdetails: false             };         }));     self.toggledetails = function (user) {         user.showdetails = !user.showdetails;         console.log(user);     }; };  ko.applybindings(new usersmodel(usersdata)); 

what's supposed happen when user clicks on link, corresponding html div should show. console shows property being changed on user object, html element's visibility not changing. explicitly made showdetails property observable, did not help.

showdetails : ko.observable(false) 

any appreciated.

var usersmodel = function (users) { var self = this; //var flag=ko.observable(true); self.users = ko.observablearray(     ko.utils.arraymap(users, function (user) {         return {             username: user.username,             address: user.address,             showdetails: ko.observable(false)  //it should observable         };     })); self.toggledetails = function (user) {     user.showdetails(!user.showdetails());     console.log(user);  }; }; 

fiddle demo