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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<div id="testForm">
</div>

<script type="text/template" id="testFormTemplate">
<form>
  <p>
    Name: <input type="text" name="name" value="<%= name %>">
  </p>
  <p>
    Email: <input type="email" name="email" value="<%= email %>">
  </p>
</form>
</script>

JavaScript

$(function(){

	var Profile = new Backbone.Model.extend({
  	defaults: {
    	name: '',
      email: ''
    },
    updateEmail: function(email) {
    	this.set({
      	email: email
      });
    }
  });
  
  var ProfileData = new Backbone.Collection.extend({
  	model: Profile
    
  });
  
  var ProfileView = new Backbone.View.extend({
  
  	el: '#testFormTemplate',
    template: _.template($('#formTemplate').html()),
    initialize: function() {
    	this.render();
    },
    render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
    }
  });
  
  var app = new ProfileView;
  
  
});