JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-role='page' id='mainPage'>
<div data-role='header'>
<h1>Main Page</h1>
</div>
<div data-role='content'>
<div data-role='fieldcontain' data-enhance='false' id='fieldContainer'>
<fieldset data-role='controlgroup'>
<legend>Ye Olde Legend</legend>
<!-- ko foreach: children -->
<input type='radio' name='childRadio' data-bind='value: name, checked: $root.selectedName, attr: { id: "cb_" + $index() }' />
<label data-bind='attr: { for: "cb_" + $index() }, text: name'></label>
<!-- /ko -->
</fieldset>
</div>
<div>
viewModel.selectedName: <span data-bind='text: selectedName'></span>
</div>
<div>
<a href='#' data-bind='click: regenChildren'>Regen Children</a>
</div>
</div>
</div>
JavaScript
var viewModel = {
children: ko.observable([
{ name: 'child 1' },
{ name: 'child 2' },
{ name: 'child 3' },
{ name: 'child 4' },
{ name: 'child 5' }
]),
selectedName: ko.observable('child 1')
};
var count = 5;
viewModel.regenChildren = function() {
newSelection = 'child ' + (count + 1);
var newChildren = [
{ name: 'child ' + (++count) },
{ name: 'child ' + (++count) },
{ name: 'child ' + (++count) },
{ name: 'child ' + (++count) }
];
viewModel.children(newChildren);
viewModel.selectedName(newSelection);
}
viewModel.children.subscribe(function() {
window.setTimeout(function() {
$('#mainPage #fieldContainer input').checkboxradio();
$('#mainPage #fieldContainer .ui-btn').removeClass('ui-btn-corner-all');
$('#mainPage #fieldContainer .ui-btn:first').addClass('ui-corner-top');
$('#mainPage #fieldContainer .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
}, 0);
});
$(document).on('pagebeforeshow', '#mainPage', function () {
ko.applyBindings(viewModel, $('#mainPage')[0]);
window.setTimeout(function() {
$('#fieldContainer').removeAttr('data-enhance');
$('#fieldContainer').trigger('create');
}, 0);
});