JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/quirkey/sammy/master/lib/min/sammy-latest.min.js"></script>
<div id="navigation">
<a href="" data-bind="click: go_to_books">Books</a>
<a href="" data-bind="click: go_to_about">About</a>
</div>
<div id="books" style="display: none">
<input type="text" data-bind="value: new_book().name"/>
<button data-bind="click: addBook">Add book</button>
<h2>Books</h2>
<ul data-bind="foreach: books">
<li><span data-bind="text: name"></span></li>
</ul>
</div>
<div id="about" style="display: none">
<p>About</p>
</div>
JavaScript
$(document).ready(function () {
function Book(name) {
var self = this;
self.name = ko.observable(name);
}
function BooksViewModel() {
var self = this;
self.new_book = ko.observable(new Book(""));
self.books = ko.observableArray([
]);
self.addBook = function () {
self.books.push(self.new_book());
self.new_book(new Book(""))
}
}
function AboutViewModel() {
var self = this;
}
function AppViewModel() {
var self = this;
self.go_to_books = function() { location.hash = "books" };
self.go_to_about = function() { location.hash = "about" };
Sammy(function() {
this.get('#books', function() {
$("#about").hide();
$("#books").show();
});
this.get('#about', function() {
$("#books").hide();
$("#about").show();
});
this.get('', function() { this.app.runRoute('get', '#books') });
}).run();
}
ko.applyBindings(new AppViewModel(), document.getElementById("navigation"));
ko.applyBindings(new BooksViewModel(), document.getElementById("books"));
ko.applyBindings(new AboutViewModel(), document.getElementById("about"));
});