JSFiddle - React, Tailwind, and code Playground

by Mir Baybin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div id="testForm">
</div>

<script type="text/template" id="formTemplate">
<form>
  <p>
    Name: <input type="text" id="name" name="name" value="<%= name %>">
  </p>
  <p>
    Email: <input type="email" id="email" name="email" value="<%= email %>">
  </p>
</form>
<div class="models">
	<p><label>Name:</label> <%= name %></p>
  <p><label>Email:</label> <%= email %></p>
</div>
</script>

JavaScript

(function(){

	var ProfileModel = new Backbone.Model.extend({
  	defaults: {
    	name: '',
      email: ''
    },
    updateEmail: function(email) {
    	this.set({
      	email: email
      });
    }
  });
  
  var ProfileCollection = new Backbone.Collection.extend({
  	model: ProfileModel
    
  });
  
  var ProfileElemView = new Backbone.View.extend({
  	className: 'models',
    template: _.template($('#formTemplate').html()),
    events: {
    	'keydown #name' : 'updateName'
    },
    initialize: function() {
    	this.listenTo(this.model, 'change', this.render);
    },
    render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
    }
  });
  
  var ProfileView = new Backbone.View.extend({
  	el: '#testForm',
    formTemplate:  _.template($('#form')),
    initialize: function() {
    	this.render();
    },
    render: function() {
    	this.$el.html(this,formTemplate(this.model.toJSON));
    }
  });
  
  
  
  
});