JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
JavaScript
Backbone.sync = function (method, model, success, error) {
success();
};
var Item = Backbone.Model.extend({
defaults: {
part1: "hello",
part2: "world"
}
});
var List = Backbone.Collection.extend({
model: Item
});
var ItemView = Backbone.View.extend({
tagName: "li",
initialize: function () {
_.bindAll(this, "render", "unrender");
this.model.bind("change", this.render);
this.model.bind("remove", this.unrender);
},
events: {
"click span.swap": "swap",
"click span.delete": "remove"
},
render: function () {
$(this.el).html(
'<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>'
);
return this;
},
unrender: function () {
$(this.el).remove();
},
swap: function () {
var swapped = {
part1: this.model.get("part2"),
part2: this.model.get("part1")
};
this.model.set(swapped);
},
remove: function () {
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.collection = new List();
this.collection.bind("add", this.appendItem);
this.counter = 0;
this.render();
},
events: {
"click button#add": "addItem"
},
addItem: function () {
this.counter++;
var item = new Item();
item.set({
part2: item.get("part2") + " #" + this.counter
});
this.collection.add(item);
},
appendItem: function (model) {
var itemView = new ItemView({
model: model
});
$("ul",...