淘汰賽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> 

柯部分：

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的正確值出口，但按鈕的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); 
};