0

私はノックアウトを使った小さなプロジェクトに取り組んでいます。そこでは、いくつかの質問への答えをシミュレートする必要があります。私は動的に3つのボタンを作成し、1つをクリックすると、その上のテキストを正しい答えと比較し、正しい場合は緑色になります。正しくない場合は、赤色になり、正しいボタンが緑色になります。ノックアウトの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はvarexitの正しい値を示しています...しかしボタンのcssは変更されません...

理由は何ですか？..

ありがとう....私。

4

2 に答える 2

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 に答える
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 に答える