淘汰賽JS和單選按鈕不是第一次點擊

Question

我在瘦客戶機上工作用基因敲除JS和我具有的單選按鈕一些問題結合，我希望有人在這裏也許能借一些洞察可能導致這和我能做些什麼來糾正這種情況。

我對單選按鈕的陣列的相當典型的佈局。

<p data-bind="text: background().description"></p> 
<div data-bind="foreach: backgroundOptions" class="bg-options"> 
    <p data-bind="text: description" class="color-swatch"></p> 
    <input type="radio" name="backgroundsGroup" data-bind="checked: $parent.backgroundId, value:id"/> 
</div>​ 

你可以看到我綁定到父對象的backgroundId。

的JS父對象和對象顯示如下所示：

var CardBackground = function(imagePath, swatchPath, id, description) { 
    var self = this; 

    var _imagePath = imagePath; 
    self.imagePath = ko.observable(_imagePath); 

    var _id = id; 
    self.id = ko.observable(_id); 

    var _description = description; 
    self.description = ko.observable(_description); 

    var _swatch = swatchPath; 
    self.swatchPath = ko.observable(_swatch); 
}; 

var Card = function() { 
    var self = this; 
    getBackgrounds = function() { 
     var bgs = [ 
      new CardBackground("noCardLarge.jpg", "card_swatch-blue.jpg", -1, "None Selected"), 
      new CardBackground("greenCard.jpg", "card_swatch-green.jpg", 10, "Green Contour Card"), 
      new CardBackground("purpleCard.jpg", "card_swatch-purple.jpg", 11, "Purple Contour Card"), 
      new CardBackground("redCard.jpg", "card_swatch-red.jpg", 12, "Red Contour Card"), 
      new CardBackground("whiteCard.jpg", "card_swatch-white.jpg", 13, "White Contour Card"), 
      new CardBackground("yellowCard.jpg", "card_swatch-yellow.jpg", 14, "Yellow Contour Card") 
      ]; 
     return bgs; 
    } 
    self.backgroundOptions = getBackgrounds(); 

    var _defaultBackground = self.backgroundOptions[0]; 
    self.defaultBackground = ko.observable(_defaultBackground); 

    var _background = self.defaultBackground(); 
    self.background = ko.observable(_background); 

    self.backgroundId = ko.computed({ 
     read: function() { 
      var values = self.backgroundOptions; 
      return values.length ? values[0] : []; 
     }, 

     write: function(newValue) { 
      for (var i = 0; i < self.backgroundOptions.length; i++) { 
       if (self.backgroundOptions[i].id() == newValue) { 
        self.background(self.backgroundOptions[i]); 
        return; 
       } 
      } 
     }, 
     owner: this 
    }); 
}; 

現在需要兩次點擊來獲取綁定到最初採取行動，那麼它只是一個從此時點擊。

另外即使缺省值被設置的各個選項框未選中。如果您更改默認的背景索引上面的描述是正確的，但單選按鈕是不正確的。

我已經創建了一個這樣的例子。
http://jsfiddle.net/JS2GV/2/

有人可能會有任何見解將不勝感激。

Answer 1

得到它的選擇對初始綁定變化defaultBackground self.backgroudId的讀取...

return _background.id(); 

所以檢查結合將得到「選擇」背景的ID，然後切換順序的無線輸入的結合...

"value:id, checked: $parent.backgroundId" 

因此該值綁定將一個值分配給它正確地進行檢查結合工作所需的輸入。

關於需要更改選項所需的雙擊，這是由於ViewModel中的id是整數，而生成的無線電輸入中的值表示爲字符串。要修復所有id在視圖模型中的引號，所以它們是字符串。

下面是一個更新的jsfiddle ... http://jsfiddle.net/JS2GV/11/