JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<!-- /////// home page start /////// -->
<section id="home" data-role="page" data-bind="with:HomePage">
<header>
<nav class="v2_n">
<a href="#home" class="active" >Home</a>
<a href="#list" data-transition="fade" >List</a>
<a href="#form" data-transition="fade" >Form</a>
</nav>
</header>
<section class="main_body max_600width">
<section class="selection_screen">
<div>
<h1 id="" data-bind="text:$root.Title"></h1>
<p data-bind="text:GreetingMessage"></p>
</div>
<section class="user_dtl">
<h2>You have recently visited</h2>
</section>
<h2 data-bind="text:$root.LastViewedPage"></h2>
</section>
</section>
</section>
<!-- /////// home page end /////// -->
<!-- /////// list page start /////// -->
<section id="list" data-role="page" data-bind="with:ListPage">
<header>
<a data-bind="click:$root.LastPage" class="go_back ui-link" href="#home">Back</a>
<nav class="v2_n">
<a href="#home" data-transition="fade" >Home</a>
<a href="#list" class="active" >List</a>
<a href="#form" data-transition="fade" >Form</a>
</nav>
<a data-bind="click:ResetList" class="go_next ui-link" href="#">Reset List</a>
</header>
<section class="main_body max_600width">
<section class="selection_screen" data-bind="foreach:$root.Data">
<article class="prfl_box">
<h3 data-bind="text:Technology"></h3>
<p data-bind="text:Id"></p>
<p data-bind="text:Status"></p>
</article>
</section>
</section>
</section>
<!-- /////// list page end /////// -->
<!-- /////// form page start /////// -->
<section id="form" data-role="page" ...
CSS
/* overwrite styles start ========================= */
.ui-body-c .ui-link-inherit {color:#73b440;}
.ui-body-c .ui-link {color:#73b440; font-weight:normal;}
.ui-body-c .ui-link:visited {color:#73b440;}
.ui-body-c .ui-link:hover { color:#73b440;}
.ui-body-c .ui-link:active {color:#73b440;}
.ui-body-c,
.ui-overlay-c { border: none; color:#4a4a4a; text-shadow: none; background:none; background-image:none;}
.ui-corner-all {-webkit-border-radius:0px; border-radius:0px;}
.ui-shadow-inset { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
.ui-input-search input.ui-input-text { border: none; width: 100%; padding:0; margin: 0; display: block; background: none; outline: 0 !important; }
.ui-input-search, div.ui-input-text { margin:0px; background-image: none; position: relative; }
div.ui-input-text { padding: 0; }
.ui-shadow {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.ui-btn-corner-all { -webkit-border-radius:0px; border-radius: 0px;}
.ui-btn-up-c, .ui-btn-hover-c { border: 0px; background:#73b440; font-weight: normal; color:#ffffff; text-shadow: none; background-image: none;}
.ui-checkbox .ui-btn-up-c, .ui-checkbox .ui-btn-hover-c { background:#dfdfdf; color:#4a4a4a;}
.ui-btn-inner { font-size: 18px; padding-left:10px; }
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:#2f3e46;}
textarea.ui-input-text { height: 100px; background:#f2f2f2; }
.ui-select .ui-btn-up-c, .ui-select .ui-btn-hover-c { background:#d5d5d5 !important; text-align:left;}
.ui-select .ui-btn-icon-right .ui-btn-inner, .ui-select .ui-li-has-count .ui-btn-inner { color:#4a4a4a;}
.ui-icon, .ui-icon-searchfield:after { background-color:#d5d5d5 !important;}
.ui-icon-shadow {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
.ui-select .ui-btn-icon-right .ui-btn-inner, .ui-select .ui-li-has-count .ui-btn-inner {...
JavaScript
var homePage = function(parent) {
var self = this
self.Parent = ko.observable(parent)
self.GreetingMessage = ko.observable('Hi! I am home page')
self.ModifyMessage = ko.observable(false)
self.LoadData = function(){
if(self.ModifyMessage()){
var message = 'You have just landed here from '+self.Parent().LastPageVisited()
self.GreetingMessage(message)
self.ModifyMessage(false)
}
}
}
var listPage = function(parent) {
var self = this
self.Parent = ko.observable(parent)
self.PageTitle = ko.observable()
self.Technologies = ko.observableArray([])
self.ReInitialize = ko.observable(true)
self.LoadData = function(){
self.Parent().LastPageVisited('list')
if(self.ReInitialize()){
var data = [
{Id:1,Technology:"Jquery",Status:"Active"},
{Id:2,Technology:"Jquery Mobile",Status:"Active"},
{Id:3,Technology:"Knockoutjs",Status:"Active"},
{Id:4,Technology:"Knockoutjs Mapping",Status:"Inactive"},
]
self.Parent().Data(data)
self.ReInitialize(false)
}
}
self.ResetList = function () {
self.ReInitialize(true)
self.LoadData()
}
}
var formPage = function(parent) {
var self = this
self.Parent = ko.observable(parent)
self.Id = ko.observable()
self.Technology = ko.observable()
self.Status = ko.observable()
self.LoadData = function(){
self.Parent().LastPageVisited('form')
self.Reset()
}
self.Reset = function () {
self.Id('')
self.Technology('')
self.Status('')
}
self.AddItem = function () {
var data = {
Id : self.Id(),
Technology:self.Technology(),
Status:self.Status()
}
self.Parent().Data.push(data)
return true
}
}
function VM() {
var self = this;
self.Title = ko.observable('With Binding Magic! Single Page Application with Knockout and JQM!')
self.HomePage = ko.observable()
self.FormPage = ko.observable()
self.ListPage = ko.observable()
self.Data = ko.observableArray([])
self.LastViewedPage...