JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div data-bind="foreach: Addresses">
<div>Address <span data-bind="text: ($index() + 1)" class="mrl"></span>
</div>
<input name="contactAddress" type="radio" data-bind="checked:$root.primaryAddress, checkedValue: $data" /> <span>Primary</span>
<div data-bind="attr:{id:'address'+($index() + 1)}" class="in">
<div class="row">
<div class="form-group">
<label>Street 1</label>
<input type="text" data-bind="value: Street" />
</div>
</div>
<div>
<div class="form-group medium">
<label>Country</label>
<input data-bind="value:Country" />
</div>
<div class="form-group medium">
<label>State</label>
<input type="text" data-bind="value:State" />
</div>
</div>
</div>
<br/>
<br/>
</div>
<div data-bind="text: toJSON()">
</div>
JavaScript
var ViewModel = function () {
var self = this;
self.Addresses = ko.observableArray([{
Street: 'street1',
State: 'state1',
Country: 'country1',
IsDefault: 'true'
},{
Street: 'street2',
State: 'state2',
Country: 'country2',
IsDefault: 'false'
}]);
self.primaryAddress= ko.observable();
/*
// Alternative approach:
self.primaryAddress.subscribe(function(oldValue) {
if(oldValue){
oldValue.IsDefault("false")
}
}, null, "beforeChange");
self.primaryAddress.subscribe(function(newValue) {
if(newValue){
newValue.IsDefault("true")
}
})*/
$.each(self.Addresses(), function (index, address) {
address.Street = ko.observable(address.Street);
address.State = ko.observable(address.State);
address.Country = ko.observable(address.Country);
if(address.IsDefault == "true"){
self.primaryAddress(address)
}
address.IsDefault = ko.computed(function(){
return address === self.primaryAddress()
});
});
self.toJSON = function(){
return JSON.stringify(ko.toJS(self.Addresses), null, 2)
}
};
ko.applyBindings(new ViewModel());