如何正确应用KO绑定以下示例

How to properly apply KO binding the following example

本文关键字：绑定 何正确 应用 KO      更新时间：2023-09-26

Basicaly，我在KO中有一个viewModel，它有2个值的数组，当单击<a>元素时（当单击第一个li>a "Val1"、<main class="stl1">...等等），我需要更改元素（main）的css类道具。奇怪的是，<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>

你几乎做对了。问题是您以错误的方式分配了值。代替

self.cssUsed = self.classArr[dat];

尝试

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

在这里查看

相关文章：