通過$父綁定綁定單選按鈕

Question

我在foreach循環中生成單選按鈕。我試圖將checked屬性綁定到父級中的基本可觀察元素。不幸的是，當點擊單選按鈕時，父級的屬性似乎沒有在點擊處理程序中更新。

基於一些previous work，似乎點擊處理程序應該是一個可以接受的位置來獲取視圖模型上的更新值。最奇怪的是，似乎在單擊單選按鈕幾次後，正確的值就會出現。

Full Fiddle

代碼：

function Question() { 
    this.name = "My Question"; 

    this.answers = ko.observableArray([ 
     new Answer(1, "Answer 1", false), 
     new Answer(2, "Answer 2", true), 
     new Answer(3, "Answer 3", false)]); 

    this.correctAnswer = ko.observable(2); 
} 

function Answer(id, name, isRight) { 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
    this.isRight = ko.observable(isRight); 
} 

ko.applyBindings(new Question()); 

$(document).on("click", "input[type='radio']", function() { 
    var answer = ko.dataFor(this); 
    var question = ko.contextFor(this).$parent; 

    var answerId = answer.id(); 
    var correctAnswer = question.correctAnswer(); 

    alert(answerId + " should equal " + correctAnswer + 
      (answerId === correctAnswer ? " SWEET" : " DAMNIT")); 
}); 
​ 

HTML

<div data-bind="text:name"></div> 
<div data-bind="foreach:answers"> 
    <label> 
     <span data-bind="text: name"></span> 
     <input type="radio" name="X" data-bind="value: id, checked:$parent.correctAnswer" /> 
    </label> 
    <br /> 
</div>​ 

Answer 1

當您綁定的檢查值到$ parent.correctAnswer，這是一個雙向綁定，這意味着你更新正確的無論你點擊什麼，都可以回答。

我建議喜歡的東西取代它：

checked:$parent.isCorrectAnswer() 

這是一個ko.computed它總是返回正確的答案，而且當所選擇的值更改

this.isCorrectAnswer= ko.computed(function() {   
    alert('your message'); 
    return 2;//return correct answer 
}); 

代碼可以提醒您未經測試，並提供讓你去:)

Answer 2

更改

answerId === correctAnswer 

到

answerId == correctAnswer 

它每次都正常工作。

希望這會有所幫助！