Как правильно применять KO связывания следующего примера

Question

Basicaly, я ViewModel в KO, имеющий массив из 2 значений, мне нужно изменить класс CSS опору элемента (main) при <a> elemets в настоящее время щелкнуло (когда первый li>a "Val1" щелкнул, <main class="stl1">... и так далее). Как ни странно, ничего не happends к <main>:

<script> 
     var mainViewModel = function() { 
      var self = this; 

      self.classArr = ['stl1', 'stl2']; 
      self.cssUsed = ko.observable(0); 

      self.getClass = function (data, event) { 
       var dat = event.target.value; 
       self.cssUsed = self.classArr[dat]; 
       console.log(dat + ' : ' + self.cssUsed); 
      } 

     } 
     ko.applyBindings(new mainViewModel()); 
</script>  

<div class='page'> 
    <header> 
     <nav> 
     <ul > 
      <li><a href="#" data-bind="value: 0, click: getClass">Val1</a></li> 
      <li><a href="#" data-bind="value: 1, click: getClass">Val2</a></li> 
     </ul> 

     </nav> 
    </header> 

    <div id='maincontent'> 
      <main data-bind="css: cssUsed" > 
       <div class="center"></div> 
      </main> 
    </div> 
</div> 

Answer 1

Вы получили это почти правильно. Проблема заключалась в том, что вы присваивали значение неверно. Вместо

self.cssUsed = self.classArr[dat]; 

попробовать

self.cssUsed(self.classArr[dat]); 

Проверьте это here