Skip to content

Instantly share code, notes, and snippets.

@evanportwood
Forked from anonymous/jsbin.lepid.css
Created February 10, 2014 20:45
Show Gist options
  • Save evanportwood/8923828 to your computer and use it in GitHub Desktop.
Save evanportwood/8923828 to your computer and use it in GitHub Desktop.
.hide {
display: none;
}
#lnkNew {
font-size: .85em;
font-weight: normal;
margin-left: 1em;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var cache = {};
function publish(topic, args) {
cache[topic] && $.each(cache[topic], function () {
this.apply($, args || []);
});
}
function subscribe(topic, callback) {
if (!cache[topic]) {
cache[topic] = [];
}
cache[topic].push(callback);
return [topic, callback];
}
function unsubscribe(handle) {
//remove a subscribed function for a topic
var t = handle[0];
cache[t] && $.each(cache[t], function (i) {
if (this === handle[1]) {
cache[t].splice(i, 1);
}
});
}
$(document).ready(function() {
$('#lnkNew').click(function() {
publish('/person/add', []);
});
$('#btnSubmit').click(function() {
publish('/person/added', [$('#txtName').val()]);
});
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="addPerson" class="hide">
<label for="txtName">Name:</label>
<input type="text" id="txtName" />
<button id="btnSubmit">Add New Person</button>
</div>
<div id="people">
<h4>Publix Peeps <a href="#" id="lnkNew">Add Person</a></h4>
<ul>
<li>Shilpa</li>
<li>Jeff</li>
</ul>
</div>
</body>
</html>
function showAddForm() {
$('#people').hide();
$('#addPerson').show();
}
function addPerson(name) {
$('ul').append('<li>' + name + '</li>');
$('#addPerson').hide();
$('#people').show();
}
//subscriptions
var addHandler = subscribe("/person/add", showAddForm);
subscribe("/person/added", addPerson);
setTimeout(function() {
unsubscribe(addHandler);
}, 8000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment