JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id='test'></div>
JavaScript
var Article = Backbone.Model.extend({
defaults: {
title: new Date().toLocaleTimeString()
}
});
var Articles = Backbone.Collection.extend({
url: 'http://godu.ippon.jit.su/articles',
model: Article
});
var Item = Backbone.View.extend({
tagName: 'li',
template: _.template('<%= article.title %> <span class="delete">[X]</span>'),
initialize: function() {
this.model.bind('destroy', this.remove, this);
this.model.bind('change', this.render, this);
},
render: function() {
$(this.el).html(this.template({
article: this.model.toJSON()
}));
return $(this.el);
},
events: {
'click .delete': 'ondelete'
},
ondelete: function() {
var self = this;
this.model.destroy({
success: function() {
self.remove();
}
});
}
});
var List = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.model.bind('reset', this.render, this);
this.model.bind('add', this.addItem, this);
},
render: function() {
$(this.el).empty();
this.model.each(this.addItem, this);
return $(this.el);
},
addItem: function(item) {
$(this.el).append(new Item({
model: item
}).render());
}
});
var Form = Backbone.View.extend({
tagName: 'form',
template: _.template('<input name="title" type="text" placeholder="title"></input>'),
initialize: function() {},
render: function() {
$(this.el).html(
this.template());
return $(this.el);
},
events: {
'submit': 'submit'
},
submit: function(e) {
e.preventDefault();
var model = new Article();
_.each($(e.target).serializeArray(), function(value) {
if (value.value !== '') {
model.set(value.name, value.value);
}
});
this.model.add(model);
...