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>

CSS

h1 {
    font-size: 1.5em;
    }

JavaScript

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(){
    //console.log("You Name from view is: " + $("input[name='yourName']").val());
        var theName = new name({
            name: $("input[name='yourName']").val()
        });
    }

    });
    var theView = new nameView();   

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