JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<input type="text" id="input">
<button id="create">Add</button>
<ul id="list"></ul>
<script type="text/template" id="item-template">
<span><%= title %></span>
<button class="delete">delete</button>
</script>
JavaScript
var Todo = Backbone.Model.extend({
});
var Todos = Backbone.Collection.extend({
model: Todo
});
var ItemView = Backbone.View.extend({
tagName: "li",
template: _.template($("#item-template").html()),
render: function (container) {
this.$el.html(this.template(this.model.toJSON()));
container.append(this.$el);
},
events: {
"click .delete": "_clear"
},
_clear: function () {
this.$el.trigger("delete", this);
}
});
var AppView = Backbone.View.extend({
el: $("body"),
events: {
"click #create": "_create"
},
_create: function () {
var data = {
title: this.$("#input").val()
};
this.$el.trigger("create", data);
}
})
var Presenter = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.appView = new AppView({
container: $("#list")
});
this.todos = new Todos;
var _this = this;
this.$el.on("create", function (e, attrs) {
var model = new Todo(attrs);
_this.todos.add(model);
var itemView = new ItemView({
model: model
})
itemView.render($("#list"));
});
this.$el.on("delete", function (e, view) {
_this.todos.remove(view.model);
view.remove();
});
}
})
var p = new Presenter;