JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/template" id="user-view">
    <h4>User goes here with equal before it no space</h4>
    <div> 
        <form id="user">
          <label><%= user.firstName + " " + user.lastName %></label>
          <label contenteditable="true" id="email"><%=user.email%></label>
          <label contenteditable="true" id="phone"><%=user.phone%></label>
          <label contenteditable="true" id="birthday"><%=user.birthday%></label>
          <button>Post</button>
        </form>        
    </div>
    <hr/>
    
</script>
<div class="user">
        <p>User log</p>
        
</div>

CSS

label {
    display: block;
}
button {
    display: none;
}

JavaScript

var App = {
    Models: {},
    Views: {}
};

App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'first',
            lastName: 'last',
            email: '[email protected]',
            phone: '222',
            birthday: '01/01/2001'
        },
    
    initialize: function() {
    },

        validate: function (attrs) {
            if (!attrs.firstName) {
                return 'You must enter a real first name.';
            }
            if (!attrs.lastName) {
                return 'You must enter a real last name.';
            }
            if (attrs.email.length < 5) {
                return 'You must enter a real email.';
            }
            if (attrs.phone.length < 10 && attrs.phone === int) {
                return 'You must enter a real phone number, if you did please remove the dash and spaces.';
            }
            if (attrs.city.length < 2) {
                return 'You must enter a real city.';
            }
        }

    });

App.Views.UserUpdate = Backbone.View.extend({
        model: App.Models.User,
        events: {
            'click button' : 'saveHandler'
        },

        initialize: function() {
            var self = this;
            self.render();
            console.log(this.model);
            $('[contenteditable=true]').on('input', function(e){
                var field = e.target.id;
                var value = e.target.innerText;
                self.model.set(field, value);
                logUser(self.model);
            });
            self.model.on('change', function(){
                $('button').show();
            });
        },
    
        saveHandler: function(e) {
            //Save logic
            //this.model.save()
            e.preventDefault();
            $(e.target).hide();
        },

        render: function() {
            var template = _.template($('#user-view').html());
            this.$el.html(template({user: this.model.toJSON()}));            
           ...