JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind="foreach: fulfillmentOptions">
      <label>
        <input type="radio" name="fulfillmentType" data-bind="checked: $parent.selectedFulfillmentType, value: $data.name()" >
        <span data-bind="text: $data.name"></span>
      </label>
    </div>
    
    <p> to reproduce bug - set selectedFulfillmentType : ko.observable('Pickup') in line 10 </p>
    <p> run - and notice that the option isn't picked</p>
    <p> now - remove set selected to null and uncomment line 18</p>
    <p> it works - maybe this is a knockout bug</p>

JavaScript

var fulfillmentViewModel = {
    fulfillmentOptions : [
        {
            name : ko.observable('Pickup')
        },
        {
            name : ko.observable('Delivery')
        }
    ],
    selectedFulfillmentType : ko.observable()
};
fulfillmentViewModel.selectedFulfillmentType.subscribe(function(type){
       //alert(type); 
});
ko.applyBindings(fulfillmentViewModel);

setTimeout(function(){
    //fulfillmentViewModel.selectedFulfillmentType('Pickup');
}, 1000)