JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://api.jslib.dotcloud.com/dev/js/q2q8b.js"></script>
<div class="container-fluid">
<ul class="row-fluid" id="list">
</ul>
<form class="row-fluid" id="add">
<h2>New submission</h2>
<label for="name">Title</label><input id="name" type="text" />
<label for="url">Link</label><input id="url" type="text" />
<input class="btn btn-primary" type="submit" />
</form>
</div>
JavaScript
// The library does some asynchronous setup work.
// Subscribe to the ready callback before performing
// database/sync operations.
dotcloud.ready(main);
function compare(apple, orange) {
return orange.score - apple.score;
}
function escape(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
function main(dotcloud) {
var votesSnippet = ' <a class="btn upvote"><i class="icon-thumbs-up"></i></a><a class="btn downvote"><i class="icon-thumbs-down"></i></a><a class="rm close">×</a>';
$(function() {
$('#add').submit(function() {
var name = $('#name').val(),
url = $('#url').val();
if (!name || !url) {
return false;
}
if (url.indexOf('http://') != 0) {
url = 'http://' + url;
}
// Push a new object in the links collection
// like you would do with a JS Array
links.push({ name: name,
url: url,
score: 0
});
$('#name').val('');
$('#url').val('');
return false;
});
});
function render() {
$('#list').empty();
// Sort links by score, then iterate over each of
// them to display the list
links.sort(compare).forEach(function(item, i) {
var li = $('<li id="' + i + '"></li>');
var a = $('<a href="' + item.url + '">' + escape(item.name) + '</a>');
li.append(a).append(' ' + item.score + votesSnippet);
$('#list').append(li);
});
$('.rm').click(function() {
var i = parseInt($(this).parent().attr('id'));
if (i == 0) {
// remove value at index 0
links.shift();
} else if (i == links.length - 1) {
// remove last value
links.pop();
}...