JSFiddle - React, Tailwind, and code Playground

by mariomc

JavaScript

var Thing = Backbone.Model.extend({
    defaults: {
        title: 'blank'
    }
});
var ThingView = Backbone.View.extend({
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'),
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'),
    events: {
        "click #remove": "deleteItem",
            "click #edit": "editItem",
            "click #save": "saveItem",
    },
    deleteItem: function () {
        console.log('deleted');
        this.model.destroy();
        this.remove();
    },
    editItem: function () {
        console.log('editing');
        this.$el.html(this.editTemplate(this.model.toJSON()));
    },
    saveItem: function () {
        console.log('saved');
        editTitle = $('input.name').val();
        console.log(editTitle);
        this.model.save({
            title: editTitle
        });
        this.$el.html(this.template(this.model.toJSON()));
    },
    render: function () {
        var attributes = this.model.toJSON();
        this.$el.append(this.template(attributes));
        return this;
    }
});
var ThingsList = Backbone.Collection.extend({
    model: Thing,
    localStorage: new Store("store-name"),
});
var storeVar = localStorage["store-name-7ee7d1e3-bbb7-b3e4-1fe8-124f76c2b64d"];
console.log(storeVar);
var thingsList = new ThingsList;
//thingsList.reset(storeVar);
var ThingsListView = Backbone.View.extend({
    el: $('body'),
    events: {
        'click #add': 'insertItem',
    },
    initialize: function () {
        thingsList.fetch();
        thingsList.toJSON();
        this.render();
        this.collection.on("add", this.renderThing, this);
    },
    insertItem: function (e) {
        newTitle = $('input').val();
        newThing = new Thing({
            title: newTitle
        });
        this.collection.add(newThing);
        newThing.save();
        console.log(this.collection.length);
    },
    render:...