JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script type="text/template" id="tpl-item">
<span class="name">{{name}}</span>
<span class="age">{{age}}</span>
<a class="delete" href="javascript:void(0)" style="margin-left:10px">Del</a>
</script>
<ul id="list"></ul>
<button id="item-add">Add Item</button>
JavaScript
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
var Item = Backbone.Model.extend({
defaults: {
name: 'name',
age: 0
}
});
var List = Backbone.Collection.extend({
model: Item
});
var items = new List();
$(document).ready(function () {
var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click a.delete': 'onDelete',
'mouseover': 'onHoverIn',
'mouseout': 'onHoverOut'
},
template: _.template($('#tpl-item').html()),
initialize: function () {
this.model.on("change", this.render, this);
},
render: function () {
var item = this.model;
this.$el.css("color", item.get("hover") ? "red" : "black").html(this.template(item.toJSON()));
return this;
},
onDelete: function () {
this.model.destroy();
},
onHoverIn: function () {
this.model.set("hover", true);
},
onHoverOut: function () {
this.model.set("hover", false);
}
});
var ListView = Backbone.View.extend({
el: "#list",
initialize: function () {
this.listenTo(items, 'add', this.renderItem);
this.listenTo(items, 'remove', this.render);
},
renderItem: function (item) {
var itemView = new ItemView({model: item});
this.$el.append(itemView.render().$el);
},
render: function () {
this.$el.empty();
items.each(this.renderItem, this);
return this;
}
});
var listView = new ListView();
items.add(new Item({
name: 'name-f',
age: 1000
}));
...