javascript - 基于 observable 更改类

Question

我的 View 模型中有一个名为“旋转”的字段。如果为 0，则图像保持在 0 度(北)。如果是 1、90 度等。

obeservable 在我期望的时候发生变化(点击按钮)，但样式没有更新。

self.RotateLeft = function (data) {

    this.Rotation(this.Rotation + 1);
    if (this.Rotation() == 4)
        this.Rotation(0);
  //  alert(data.Rotation());

}

我的图像定义为:

<img data-bind="attr: {src: Image}, css: {north: Rotation()==0, east: Rotation()==1, south: Rotation()==2, west: Rotation()==3}" alt="text: Description" class="img-responsive">

还有我的CSS:

.north {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.west {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
.south {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */

}
.east {
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
}

这是更改 css 类的正确方法吗？如果是这样，知道为什么它不旋转吗？

Answer 1

很高兴你成功了。但是考虑到这些类都将是相互排斥的，您可能应该将要直接应用的类绑定(bind)到一个可观察对象。它将大大简化一切。

var viewModel = {
  content: ko.observable('foobar'),
  css: ko.observable(),
  cssOptions: [ 'red', 'green', 'blue' ],
  next: function () {
    var css = viewModel.css(),
        cssOptions = viewModel.cssOptions,
        length = cssOptions.length,
        index = cssOptions.indexOf(css),
        nextIndex = index >= 0 ? index + 1 : 0;
    viewModel.css(cssOptions[nextIndex % length]);
  }
};
ko.applyBindings(viewModel, document.getElementById('main'));

.red   { color: red;   }
.green { color: green; }
.blue  { color: blue;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="main">
  <div data-bind="text: content, css: css"></div>
  <div>
    <select data-bind="value: css, options: cssOptions, optionsCaption: 'css'"></select>
    <button data-bind="click: next">NEXT</button>
  </div>
</div>