JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Knockout Demo</title>
</head>
<body>
<div class="span6 srpma_Content">
<div class="well">
<h3>Add contact information</h3>
<div class="normTxt">Email or phone number<br><input type="text" name="phone"></div>
<div class="normTxt">Optional label (<em>e.g. Chris</em>) <br><input type="text" name="alias"></div>
<button class="btn btnMains btn-success" type="submit">Add contact</button>
</div>
<div class="well">
<div>
<h3>Manage contact information</h3>
<p>Click to edit. Drag them to change their order.</p>
<h4 class="h4spaced">Phone</h4>
<div id="phone" data-bind="template: { name: 'phoneTemp', foreach: phoneNumbers }, sortableListPhone: phoneNumbers"></div>
<script id="phoneTemp" type="text/html">
<div class="item">
<a href="#" data-bind="text: name, click: function () { phoneModel.selectPhone($data); }, visible: $data !== phoneModel.selectedPhone()"></a>
<input data-bind="value: name, visibleAndSelectPhone: $data === phoneModel.selectedPhone(), event: { blur: function () { phoneModel.selectPhone(''); } }" />
...
JavaScript
function Phone(name) {
this.name = ko.observable(name);
}
function Email(name) {
this.name = ko.observable(name);
}
var phoneModel = {
phoneNumbers: ko.observableArray([
new Phone(":: Home (480-555-1234) *primary"),
new Phone(":: 480-555-9999"),
new Phone(":: 480-555-9998"),
new Phone(":: 480-555-9997"),
new Phone(":: 480-555-9996"),
new Phone(":: 480-555-9995"),
new Phone(":: 480-555-9994"),
new Phone(":: 480-555-9993")
]),
selectedPhone: ko.observable(),
selectPhone: function (phone) {
this.selectedPhone(phone);
},
addPhone: function () {
var phone = new Phone("new");
this.selectedPhone(phone);
this.phoneNumbers.push(phone);
}
};
var emailModel = {
emails: ko.observableArray([
new Email(":: [email protected] *primary"),
new Email(":: Maria ([email protected])"),
new Email(":: Chris ([email protected])")
]),
selectedEmail: ko.observable(),
selectEmail: function (email) {
this.selectedEmail(email);
},
addEmail: function () {
var email = new Email("new");
this.selectedEmail(email);
this.emails.push(email);
}
};
//connect items with observableArrays
ko.bindingHandlers.sortableListPhone = {
init: function (element, valueAccessor) {
var list = valueAccessor();
$(element).sortable({
update: function (event, ui) {
//retrieve our actual data item
var item = ui.item.tmplItem().data;
...