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-bind='foreach: children'>
            <div style='border: 1px solid #666; margin-bottom: 0.5em;'>
                <h6 data-bind='text: name'></h6>
                <span data-bind='text: notes() || "(none)"'>
                </span>
                <a href='#editPage' data-bind='click: $root.editClick'>
                    Edit
                </a>
            </div>
        </div>
    </div>
</div>

<div data-role='page' id='editPage'>
    <div data-role='header'>
        <a data-icon='arrow-l' data-rel='back'>Back to Main Page</a>
        <h1>Edit <span data-bind='text: currentChild().name'></span></h1>        
    </div>

    <div data-role='content'>
        <div data-role='fieldcontain'>
            <label for='txtNotes'>Notes</label>
            <input id='txtNotes' name='txtNotes' />            
        </div>
    </div>
</div>

JavaScript

var viewModel = {
    children: [
        { name: 'child 1', notes: ko.observable('') },
        { name: 'child 2', notes: ko.observable('') },
        { name: 'child 3', notes: ko.observable('') },
        { name: 'child 4', notes: ko.observable('') },
        { name: 'child 5', notes: ko.observable('') }
    ],
    currentChild : ko.observable(null);
};

viewModel.editClick = function(child) {
    viewModel.currentChild(child);        
};

$(document).on('pageinit', '#mainPage', function () {
    ko.applyBindings(viewModel, $('#mainPage')[0]);
});

$(document).on('pageinit', '#editPage', function () {
    ko.applyBindings(viewModel, $('#editPage')[0]);    
});