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>
 
<div class="dd" id="nestable3">
    <ol class="dd-list"></ol>
</div>
</body>

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

JavaScript

$(document).ready(function () {

    var Item = Backbone.Model.extend({
        defaults: {
            content: 'Test',
            id: new Date().getTime()
        },

        empty: function () {
            this.save({
                content: ''
            });
        }
    });

    var TodoList = Backbone.Collection.extend({
        // Reference to this collection's model.
        model: Item,

        // Save all of the todo items under the `"todos-backbone"` namespace.
        localStorage: new Backbone.LocalStorage('flow')
    });

    // Create our global collection of **Todos**.
    var Todos = new TodoList();

    var TodoView = Backbone.View.extend({
        //... is a list tag.
        tagName: "li",

        // Cache the template function for a single item.
        template: _.template($('#item-template').html()),

        // The DOM events specific to an item.
        events: {
            "click > .dd3-content": "enableEdit",
                "blur > .dd3-content": "disableEdit",
                "keypress .dd3-content": "handleKeyboardShortcuts"
        },

        // The TodoView listens for changes to its model, re-rendering. Since there's
        // a one-to-one correspondence between a **Todo** and a **TodoView** in this
        // app, we set a direct reference on the model for convenience.
        initialize: function () {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },

        // Re-render the titles of the todo item.
        render: function () {
            $(this.el).attr('data-id', this.model.get('id')).addClass('dd-item dd3-item');
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        // Toggle the `"done"` state of the model.
        enableEdit: function () {
            var editableArea = $(this.el).children('.dd3-content');

            editableArea.attr("contenteditable", "true");
         ...