淘汰赛css动态绑定

Question

我正在做一个带有淘汰赛的小项目，我必须模拟一些问题的答案。 我动态构建了 3 个按钮，当我单击一个按钮时，我将其上的文本与正确答案进行比较，如果正确，则应变为绿色..，如果不正确，则应变为红色，正确的应变为绿色.. 我试图使用绑定到淘汰赛的 css 属性，但似乎该属性没有正确刷新，即使与 css 关联的计算发生了变化 html:

<ul data-bind="foreach: chosenQuestionAnswers">
  <li>
    <button data-bind="text: answerText, css: $root.answerStatus(), click: $root.selectButton"></button>
  </li>
</ul>

ko部分：

 selectedAnswer: ko.observable(),
 isAnswerCorrect: ko.observable(),

selectButton: function (value) {    my.AppViewModel.isAnswerCorrect(my.AppViewModel.checkIfCorrectAnswer(value.answerText));
 },

checkIfCorrectAnswer: function (value) {
return (value == my.AppViewModel.chosenQuestionCorrectAnswer());
  },

my.AppViewModel.answerStatus = ko.computed(function () {
var exit = this.isAnswerCorrect() == true ? "highlightRight" : "highlightWrong";
console.log(this.isAnswerCorrect());
console.log(exit);
return exit;
 }, my.AppViewModel);

console.log 显示 var exit 的正确值...但是按钮的 css 没有改变...

知道为什么吗？..

谢谢....我。

Answer 1

您引用的是旧版本的 KO (2.1)，截至今天的最新版本是 2.2.1。引用新版本@http://knockoutjs.com/downloads/knockout-2.2.1.js 时，您的小提琴有效。这是一个叉子：http://jsfiddle.net/drdamour/xe2M5/

动态 css 绑定（您如何使用它）仅在 2.2 中添加，请参阅 http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

堆栈不会让我在没有代码的情况下提交，所以......这里有一些毫无价值的代码：

var x = {a:1}

Answer 2

css 类是视图的一部分，尽量让它们远离 ViewModel，它应该专注于业务逻辑。

我会做类似的事情

http://jsfiddle.net/hLXbq/

HTML

<button data-bind="css: { valid: valid, invalid: invalid }, click: toggle">Toggle</button>

JS

ViewModel = function () {
    this.valid = ko.observable(false);
    this.invalid = ko.computed(function () {
        return !this.valid();
    }, this);
};