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.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="https://rawgithub.com/FormidableLabs/handlebones/master/handlebones.js"></script>

CSS

.done {
    text-decoration: line-through;
}

JavaScript

var TodoModelView = Handlebones.ModelView.extend({
  tagName: "li",
  template: Handlebars.compile('<input type="checkbox"> {{title}}'),
  initialize: function () {
    this.listenTo(this, "ready", this._onChange);
    this.listenTo(this.model, "change", this._onChange);
  },
  _onChange: function () {
    if (this.model.get("done")) {
      this.$el.addClass("done");
      this.$("input").attr("checked", true);
    } else {
      this.$el.removeClass("done");
      this.$("input").removeAttr("checked", true);
    }
  }
});

var TodosCollectionView = Handlebones.CollectionView.extend({
  tagName: "ul",
  modelView: TodoModelView
});

var TodosView = Handlebones.View.extend({
  events: {
    "submit form": function (event) {
      event.preventDefault();
      var input = this.$('input[name="title"]');
      this.collection.add({
        title: input.val()
      });
      input.val("")
    },
    'change input[type="checkbox"]': function (event) {
      $(event.target).view().model.set({
        done: event.target.checked
      });
    }
  },
  template: Handlebars.compile(
    '{{view todosCollectionView}}' +
    '<form><input name="title">' + 
    '<input type="submit" value="Add"></form>'
  ),
  initialize: function (options) {
    this.todosCollectionView = this.addChild(new TodosCollectionView({
      collection: options.collection
    }));
  }
});

var collection = new Backbone.Collection([
  {title: "First Todo", done: true},
  {title: "Second Todo", done: false},
]);

var view = new TodosView({
  collection: collection
});
view.appendTo(document.body);