JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="view-goes-here"></div>
<script type="text/template" id="customer-detail-view-template">
    <div>
        <span class="displayText">
            <p class="searchResultsAuxInfo">Full Name : <%= getProperty("full_name", null) %> </p>
            <p class="searchResultsAuxInfo">Country Code : <%= getProperty("country_code", null) %></p>
            <p class="searchResultsAuxInfo">street : <%= getProperty("street", null) %></p>
            <p class="searchResultsAuxInfo">maiden_name : <%= getProperty("maiden_name", null) %></p>
        </span>
        <span class="displayTextRight">
            <p class="searchResultsAuxInfo">marital_status_code : <%= getProperty("marital_status_code", null) %></p>
            <p class="searchResultsAuxInfo">tax_id_number : <%= getProperty("tax_id_number", null) %></p>
            <p class="searchResultsAuxInfo">primary_phone : <%= getProperty("primary_phone", null) %></p>
            <p class="searchResultsAuxInfo">customer_number : <%= getProperty("customer_number", null) %></p>
        </span>
    </div>
</script>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}

JavaScript

var viewHelper = {
    getProperty: function(propertyName) {
        console.log('getProperty ' + propertyName);
        return propertyName;
    }
};

var CustomerDetailView = Backbone.View.extend({
    tagName: "div",
    template: "#customer-detail-view-template",

    initialize: function() {
        _.bindAll(this, 'render');
        this.initializeTemplate();
    },

    initializeTemplate: function() {
        this.template = _.template($(this.template).html());
    },

    render: function() {
        var data = {
            property: 'property'
        };
        _.extend(data, viewHelper);
        var html = this.template(data);
        $(this.el).append(html);
        return this;
    }
});

var v = new CustomerDetailView();
$('#view-goes-here').append(v.render().el);