JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg-min.js"></script>
<script type="text/template" id="descriptionViewTemplate">
    <label><%= text.id %> <%= text.title %> </label>
        
        <p><%= text.description %></p>
</script>
<script type="text/template" id="printerDetailViewTemplate">
    <div> <img id="printerImage"
    src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" /> <svg id="nodesViewLayer"> 
<circle data-feature-id="0" cx="35" cy="50" r="5" stroke="#0f0" stroke-width="3" fill="#070" />
<circle data-feature-id="1" cx="135" cy="45" r="5" stroke="#0f0" stroke-width="3" fill="#070" />
<circle data-feature-id="2" cx="225" cy="134" r="5" stroke="#0f0" stroke-width="3" fill="#070" />        
        
        </svg>
    </div>
</script>
        
<div id="printerDetailView"></div>
<div id="descriptionView"></div>
        
        <button id="item1">gogogog</button>

CSS

#nodesViewLayer {
    width: 550px;
    height: 180px;
    position: absolute;
    border: 2px solid #000;
    left: 0;
}
#printerImage {
    width: 250px;
    height: 180px;
    border: 1px solid #f00;
    float: left;
    margin: 0;
}
#descriptionView {
    width: 300px;
    height: 180px;
    border: 2px solid #060;
    float: left;
    padding: 10px;
}

JavaScript

var Printer = Backbone.Model.extend({
    defaults: {
        name: 'DuraLabel 9000 (PS)',
        features: [{
            id: 0,
            title: 'Large Labels',
            description: 'From 4” – 9” width, print signs and large labels at any length. Bold 300 dpi HD print resolution means you can go ahead and print that billboard. '
        }, {
            id: 1,
            title: 'Harsh Environments',
            description: 'Tough tested vinyl supply will withstand the most extreme outdoor environments on the planet. From -300⁰F to 300⁰F degrees, chemical exposures, to wet, dirty or oily surfaces—your signs and labels will hold up. '

        }, {
            id: 2,
            title: 'Go Network Free with the PS',
            description: 'Use the 10” touchscreen, seated in an ergonomically adjustable bracket on the PS model for a standalone workstation. Network independence allows you to print on demand from the plant to the warehouse.'
        }]
    }
});



var PrinterDetailView = Backbone.View.extend({
    initialize: function (options) {

        this.descriptionView = new DescriptionView({
            el: $('#descriptionView'),
            model: printer,
            featureId: 0
        });
        this.render()

    },
    events: {
        'click circle': 'animateView'
    },
    animateView: function (e) {
        var target = $(e.currentTarget).data('feature-id');
        this.descriptionView.featureId = target;
        console.log(this.descriptionView.featureId)
        this.descriptionView.render()
    },
    render: function () {

        var template = _.template($("#printerDetailViewTemplate").html(), {

        });
        this.$el.html(template);
    }
});

var DescriptionView = Backbone.View.extend({
    //template: _.template($('#descriptionViewTemplate').html()),
    initialize: function (options) {
        this.model = options.model;
        this.featureId = options.featureId


        this.render();

    },
    render: function...