JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<ul id="container"></ul>

<input type="button" value="Add item" class="add-item" />

CSS

#container {
    border: 1px solid #AAA;
    width: 100%;
    padding: 1rem;
}

JavaScript

var ItemModel = Backbone.Model.extend({
    defaults: {text: 'Some task', done: false}
});

var ItemView = Backbone.View.extend({
    tagName: 'li',
    
    events: {
        'click .btn-edit': 'do_edit',
        'click .btn-toggle': 'do_toggle'
    },
    
    do_edit: function() {
        var text = this.model.get('text');
        var newText = prompt('Enter text:', text);
        if (newText) {
            this.model.set('text', newText);
        }
        this.render();
    },

    do_toggle: function() {
        this.model.set('done', !this.model.get('done'));
        this.render();
    },

    initialize: function(model) {
        this.model = model;
        this.render();
    },

    render: function() {
        this.$el.html(this.model.get('text') + ': ' + (this.model.get('done') ? 'DONE' : 'UNDONE') + ' <input type="button" value="Edit" class="btn-edit" /> <input type="button" value="Toggle DONE" class="btn-toggle">');
    }
});

$('.add-item').on('click', function() {
    var text = prompt('Enter new task text:');
    var model = new ItemModel({text: text, done: false});

    var item = new ItemView(model);
    $('#container').append(item.el);
});