JSFiddle - React, Tailwind, and code Playground

by erick

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="betterlist_app" class='liveExample'>
        New item:
        <input id="new-item" data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> 
        <button data-bind='enable: itemToAdd().length > 0' id='add-item' type='submit'>Add</button> 
        
        <p>Your items:</p>
        <div>
            <select id='betterlist' multiple='multiple' width='50'></select>
        </div>
    
        <div> 
        <button id='remove-item'>Remove</button>
        <button id='sort-item'>Sort</button>
    </div> 
</div>

<!--
<div class='liveExample'> 
    
    <form data-bind='submit:addItem'> 
        Add item: <input data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' type='text' /> 
        <button data-bind='enable: itemToAdd().length > 0' type='submit'>Add</button> 
    </form> 
    
    <p>Your values:</p> 
    <select data-bind='options:allItems, selectedOptions:selectedItems' multiple='multiple' height='5'> </select> 
    
    <div> 
        <button data-bind='click: removeSelected, enable: selectedItems().length > 0'>Remove</button> 
        <button data-bind='click: function() { allItems.sort() }, enable: allItems().length > 1'>Sort</button> 
    </div> 
    
</div>
-->

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

JavaScript

//Better List - Backbone
var ItemModel = Backbone.Model.extend({
    defaults: {
        value: 'item XXX'
    }
});

var ItemCollection = Backbone.Collection.extend({
    model: ItemModel
});

var ItemView = Backbone.View.extend({
    events: {
        "customRemove": "customRemove"
    },
    tagName: 'option',
    template: _.template('<%= value %>'),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.attr('data-id', this.model.get('id'));
        return this;
    },
    customRemove: function() {
        console.log('customRemove');
        this.$el.remove();
        this.model.destroy();
    }
});

var ListView = Backbone.View.extend({
    initialize: function() {
        this.collection.on('add', this.addOne, this);
    },
    el: $('#betterlist_app'),
    events: {
        "click #add-item": "addItem",
        "click #sort-item": "sortItem",
        "click #remove-item": "removeItem"
    },
    render: function() {
        this.collection.forEach(this.addOne, this);
    },
    addOne: function(model) {
        var itemView = new ItemView({
            model: model
        });
        itemView.render();
        this.$el.find('#betterlist').append(itemView.el);
    },
    addItem: function() {
        console.log('addItem');
        var newItem = $("#new-item");
        var itemValue = newItem.val();

        if ( !! itemValue) {
            newItem.val('');
            this.collection.add(new ItemModel({
                value: itemValue
            }));
        }
    },
    sortItem: function() {
        this.$el.find('#betterlist').html('');
        this.render();
    },
    removeItem: function() {
        console.log('removeItem');
        $('#betterlist option:selected').each(function() {
            $(this).trigger('customRemove');
            console.log($(this).text());
        });
    }
});

var itemCollection = new ItemCollection();

// The collection will always be sorted because of this...