JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<h1> Test of Backbone App </h1>
<div id="main"></div>
<script type="text/template" id="testing-template">
    <label for="yourName"> Enter your name </label>
    <input type="text" name="yourName" />
</script>
<script type="text/template" id="testing-result">
    <div id ="nameResult"> Your name is <p id="name"><%- name2 %></p></div>
</script>

CSS

h1 {
    font-size: 1.5em;
    }

JavaScript

// Creating the model
var name = Backbone.Model.extend({
    defaults: function() {
        return {
            name: "Andy",
            age: "25"
        }
    },
    initialize: function() {
            if(!this.get("age")) {
            this.set({age: this.defaults.age});
            }
            console.log("initialized: " + this.get("name") + " " +  this.get("age"));
            }
    
    });

var nameView = Backbone.View.extend({
    template:_.template($("#testing-template").html()),
    el: $("#main"),
    initialize: function() {    
    this.render();
    },                               
    render: function() {
    console.log("rendering");
       this.$el.html(this.template());
    },
    events: {
    "blur input[name=yourName]": "doSomething"    
    },
    doSomething: function(){
        var theName = new name({
            name: $("input[name='yourName']").val() 
        });
        var theResult = new nameResult({model: theName});      
    }

    });
    var theView = new nameView(); 


var nameResult = Backbone.View.extend({
    template:_.template($("#testing-result").html()),
    el: $("#main"),
    initialize: function() {    
    this.render();
    },                               
    render: function() {
       var inputName = this.model.get("name");
        this.template({ name2: inputName});
        console.log("render name: " + inputName);
       this.$el.html(this.template());
    },
    events: {
    "click #nameResult": "loadForm"    
    },
    loadForm: function(){
        theView.render();       
    }
    });