JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://backbonejs.org/examples/backbone.localStorage.js"></script>
<body>
	<ol id="flowList"></ol>
</body>

<script type="text/template" id="item-template">
    <%= content %>
</script>

JavaScript

$(function() {
	var Item = Backbone.Model.extend({

	defaults: function() {
	  return {
	    content: "empty item..."
	  };
	}

	});

	var ItemList = Backbone.Collection.extend({
	    model: Item,
	    localStorage: new Backbone.LocalStorage("todos-backbone"),
	});

	var Items = new ItemList;

	var ItemView = Backbone.View.extend({
		tagName:  "li",

		template: _.template($('#item-template').html()),

		events: {
		  "click": "enableEdit",
		  "blur": "disableEdit",
		},

        initialize: function() {
		  this.listenTo(this.model, 'change', this.render);
		  this.listenTo(this.model, 'destroy', this.remove);
		},

		render: function() {
		  this.$el.html(this.template(this.model.toJSON()));
		  return this;
		},

		enableEdit: function(){
			this.$el.attr("contenteditable","true").focus();
		},

		disableEdit: function(){
			this.$el.attr("contenteditable","false");
		}
	});

   var AppView = Backbone.View.extend({

    el: $("#flowList"),

    events: {
	  "keydown li": "handleKeyboardShortcuts"
    },

    initialize: function() {
		this.listenTo(Items, 'add', this.addOne);
		this.listenTo(Items, 'reset', this.addAll);
		this.listenTo(Items, 'all', this.render);

	    Items.fetch();

	    if (Items.length === 0){
	    	Items.create({content: "Sample Item!"});
	    }
    },

    render: function(e) {
    	console.log(e);
    },

    addOne: function(todo) {
      var view = new ItemView({model: todo});
      $(this.el).append(view.render().el);
    },

    addAll: function() {
      Items.each(this.addOne, this);
    },

    handleKeyboardShortcuts: function(e){
		if (e.keyCode == 13 && !e.shiftKey){
			e.preventDefault();
			this.el = $(e.target).parent();
            Items.create({contnet: "New Item!"});
		}
	}
  });

  var App = new AppView;
});