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="flowItems"></ol>
</body>
<script type="text/template" id="item-template">
    <%= content %>
</script>

JavaScript

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

        // Default attributes for the flow item.
        defaults: function () {
            return {
                content: "sample item",
            };
        }
    });

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("todos-backbone"),

    // Filter down the list of all todo items that are finished.
    done: function() {
      return this.where({done: true});
    },

    // Filter down the list to only todo items that are still not finished.
    remaining: function() {
      return this.where({done: false});
    },

    // We keep the Todos in sequential order, despite being saved by unordered
    // GUID in the database. This generates the next order number for new items.
    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    // Todos are sorted by their original insertion order.
    comparator: 'order'

  });

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

});