Databases
StackOverflow2013
Postsdbo
POKnockout JS and radio button not binding on first click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout JS and radio button not binding on first click
    text
    copied!<p>I am working on a thin client using knockout JS and am having some issues with the radio button and am hoping someone here might be able to lend some insight into what maybe causing this and what I can do to rectify the situation. </p> <p>I have a fairly typical layout for an array of radio buttons.</p> <pre><code>&lt;p data-bind="text: background().description"&gt;&lt;/p&gt; &lt;div data-bind="foreach: backgroundOptions" class="bg-options"&gt; &lt;p data-bind="text: description" class="color-swatch"&gt;&lt;/p&gt; &lt;input type="radio" name="backgroundsGroup" data-bind="checked: $parent.backgroundId, value:id"/&gt; &lt;/div&gt;​ </code></pre> <p>You can see I am binding to the backgroundId for the parent object. </p> <p>The JS for the parent object and object being displayed looks as follows:</p> <pre><code>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 &lt; self.backgroundOptions.length; i++) { if (self.backgroundOptions[i].id() == newValue) { self.background(self.backgroundOptions[i]); return; } } }, owner: this }); }; </code></pre> <p>Right now it takes two clicks to get the binding to take action initially, then its just one click from that point forward. </p> <p>Additionally even though a default value is set the respective option box is not selected. If you change the index on the default background the description above is correct, but the radio button is not correct. </p> <p>I have created an example of this.<br> <a href="http://jsfiddle.net/JS2GV/2/" rel="nofollow">http://jsfiddle.net/JS2GV/2/</a></p> <p>any insight someone might have would be greatly appreciated. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload