jquery - Knockout CSS /Style Binding when I click a List Item -

i have 3 list items use foreach binding. toggle 'activeclass' when click 1 of them.

this have far! appreciated.

<h4>people</h4>  <ul data-bind="foreach: people"> <li>     <span data-bind="text: name, css: function () { $root.styling(); }, click: function    () { $root.toggle();}"> </span> </li> </ul>  function appviewmodel() { var self = this; self.active = ko.observable(false);  self.people = ko.observablearray([     { name: 'bert' },     { name: 'charles' },     { name: 'denise' } ]); self.styling = ko.computed(function () {      if (self.active() === true) {         return 'activeclass';     }     else {         return '';     } });  self.toggle = function () {     self.active(!self.active());  } } ko.applybindings(new appviewmodel()); 

http://jsfiddle.net/s3kg9/5/

you need add active part of each object , make observable, pass function: jsfiddle

the html part:

<h4>people</h4> <ul data-bind="foreach: people">     <li>         name @ position <span data-bind="text: $index"> </span>:         <span data-bind="text: name, css:  $root.styling($data), click: function () { $root.toggle($data);}"> </span>     </li> </ul> 

and viewmodel:

function appviewmodel() {     var self = this;     self.people = ko.observablearray([         { name: 'bert', active: ko.observable(false) },         { name: 'charles', active: ko.observable(false) },         { name: 'denise', active:ko.observable(false) }     ]);     self.styling =function (person) {         if (person.active() === true) {             return 'test';         }         else {             return '';         }     };      self.toggle = function (person) {        person.active(!person.active());           }  }  ko.applybindings(new appviewmodel());