基于 observable 改变类答案

【问题标题】：Change class based on observable基于 observable 改变类
【发布时间】：2017-05-07 13:19:14
【问题描述】：

我的视图模型中有一个名为“Rotation”的字段。如果为 0，则图像保持在 0 度（北）。如果是 1、90 度等。

当我期望它（点击按钮）时，可观察对象正在发生变化，但样式没有更新。

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 类的正确方法吗？如果是这样，知道为什么它不旋转吗？

【问题讨论】：

这对我来说似乎很好。你如何绑定RotateLeft() 函数？在我看来，由于您使用的是this，但没有绑定到this，因此您会遇到问题。 p.s.，您不一定必须使用对象进行 css 绑定，特别是因为您想要的类都是互斥的，您可以使用一个 observable 来返回您想要应用的类名。
感谢@JeffMercado - 找到了我的问题。请参阅 javascript 。 ... . “this.Rotation + 1”这一行。我忘记括号了！ :) 它在函数中加了 1。将其更改为 this.Rotation() + 1 解决了这个问题。
啊，也错过了！很高兴它正在工作。

标签： javascript css knockout.js

【解决方案1】：

很高兴你让它工作了。但是考虑到这些类都是互斥的，你可能应该绑定到一个带有你想要直接应用的类的 observable。它将大大简化一切。

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>

【讨论】：

【解决方案2】：

在 javascript 中发现错误。

this.Rotation + 1

应该是

this.Rotation() + 1

新手错误。

【讨论】：