JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://agilityjs.com/docs/agility.min.js"></script>
<form id="new-status">
<textarea></textarea>
<input type="submit">
<div id="statuses"></div>
</form>
JavaScript
/* This override is necessary for the code to work with JSFiddle's echo service. It is not relevant to the Agility code itself. */
$$.adapter.restful = function(_params){
var params = $.extend({
url: '/echo/json/',
dataType: 'json',
data: {'json': JSON.stringify(_params.data)},
}, _params);
$.ajax(params);
}
/* Begin actual code */
var statusItemProto = $$({
model: { text: ''} ,
view: { format: '<li data-bind="text" />' }
});
statusItemProto.persist($$.adapter.restful);
$(document).ready(function() {
$('#new-status').submit(function(e) {
e.preventDefault();
var item = $$(statusItemProto, {
model: {text: $(this).find('textarea').val()}
});
item.bind('persist:save:success', function(){
$$.document.append(item, '#statuses');
$(this).find('textarea').val('');
});
item.save();
});
});