JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<div data-role="page" id="dashBoardPage" data-bind="with: dashboardData">
    <button type="button" data-bind="click: goToList">DashBoard!</button>
</div>
<div data-role="page" id="firstPage" data-bind="with: hospitalList">
    <div>
        <div id="listViewDiv">
            <ul data-role="listview" data-bind="foreach: hospitals">
                <li data-bind="click: $parent.selectHospital">
                     <h2>Hospital Id:<span data-bind="text:id"></span></h2>

                    <p>Name <span data-bind="text:name"></span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="detailsView" data-bind="with: hospitalList.selectedHospital"> <a href="#firstPage">Back</a>
 <a href="#dashBoardPage">Home</a>

    <div>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-ajax="false">Info</a>
                    </li>
                    <li><a href="#two" data-ajax="false">Details</a>
                    </li>
                </ul>
            </div>
            <div id="one" class="ui-body-d ui-content">
                 <h2>Hospital Id : <span data-bind="text:id"></span></h2>

            </div>
            <div id="two">
                 <h2>Id : <span data-bind="text:id"></span></h2>

                <input data-mini="true" tabindex="5" data-bind="value: name" id="name" />
            </div>
        </div>
    </div>
</div>

JavaScript

function NavigationService() {
    var self = this;

    self.navigateTo = function (pageId) {
        $.mobile.changePage($('#' + pageId));
        $('#detailsView').trigger('create');
    };
}
//You need to determine if you want to handle dependencies using requirejs or just global variables.
var navigationService = new NavigationService();

function HospitalViewModel(data) {
    var self = this;
    self.id = data.id;
    self.name = ko.observable(data.name);
}

function DashboardViewModel(data) {
    var self = this;

    self.goToList = function () {
        navigationService.navigateTo('firstPage');
    };
}

function HospitalListViewModel(data) {
    var self = this;

    self.hospitals = data;
    self.selectedHospital = ko.observable();

    self.selectHospital = function (hospital) {
        self.selectedHospital(hospital);
        navigationService.navigateTo('detailsView');
    };
}

function PageViewModel() {
    var self = this;

    //This list should be retrieved from a service of some kind
    var allHospitals = [{
        "id": "001",
        "name": "Hospital1",
        "location": "SL"
    }, {
        "id": "002",
        "name": "Hospital2",
        "location": "SL"
    }].map(function (hospital) {
        return new HospitalViewModel(hospital);
    });

    self.hospitalList = new HospitalListViewModel(allHospitals);
    self.dashboardData = new DashboardViewModel();
}

ko.applyBindings(new PageViewModel());