0

我正在做一个带有淘汰赛的小项目，我必须模拟一些问题的答案。我动态构建了 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 没有改变……

知道为什么吗？...

谢谢……我。

4

2 回答 2

0

您引用的是旧版本的 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}
于 2013-01-26T08:08:24.520 回答
0

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);
};
于 2013-01-25T12:31:12.620 回答