Question

我正在制作一个淘汰赛的小项目，我必须模拟asome问题的答案。我动态构建了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

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);
};

Answer 2

您引用的是旧版本的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}

淘汰css动态绑定

2 个答案: