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">
    <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:hospitalList.selectedHospital().id"></span></h2>
  </div>
  <div id="two">
      <h2>Id : <span data-bind="text:hospitalList.selectedHospital().id"></span></h2>
         <input data-mini="true" tabindex="5" data-bind="value: hospitalList.selectedHospital().name"
               id="name"/>
    </div>
</div>
   </div>
</div>

JavaScript

function NavigationService(){
    var self = this;
    
    self.navigateTo = function(pageId){
        $.mobile.changePage($('#' + pageId));
    };
}
//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({id:"",name:"",location:""});
    
    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());