JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/template" name="image">
    <section class="selection"><header>{answer}</header>
        <section><img src="{image}" /> </section>
    </section>
</script>
<section id="output"></section>

CSS

.selection{
    border: 1px solid gray;
    width: 275px;
    height: 275px;
    margin:15px;
}
.selection header {
    height: 45px;
    background-color:whitesmoke;
}
.selected .selection{
    border:1px solid lime;
}
.selection img{
    height:230px;
}
.selection header{
    text-align:center;
    line-height:3;
    width: 275px;
    
}

JavaScript

Backbone.$ = jQuery
var mock = {
    "id": "dsfadsf",
        "text": "sfdf",
        "values": null,
        "mandatory": false,
        "additionalParameters": {
        "images": [{
            "answer": "image_a",
                "image": "http://placekitten.com/g/275/230"
        }, {
            "answer": "this will surely span on two line, doesn't it? I mean is long enough",
                "image": "http://placekitten.com/275/230"
        }]
    },
        "helpText": null,
        "collectionGroup": null,
        "summaryTemplate": null,
        "type": "imageselect",
        "groups": []
}

_.substitute = function (string, obj) {
    return string.replace(/\{(.+?)\}/gm, function (a, b) {
        return obj[b] || ''
    })
}

var SingleImage = Backbone.View.extend({
    events:{
        'click' : 'onClick',
        'clear' : 'onClear'
    },
    initialize: function () {
            this.render()
    },
    render: function () {
       if (this.model) {
            this.$el.html(
            
                this.options.template({
                    answer: this.model.get('answer'),
                    image: this.model.get('image')
                })
            )
        }
    },
    clear: function(){
        //alert('foo')
        this.$el.removeClass('selected')
    },
    onClick: function(){
       this.$el.addClass('selected')
       this.trigger('selected')
    }
}),

GenericModel = Backbone.Model.extend({});

var ImageSelector = Backbone.View.extend({
    initialize: function(){
        var all = []
        
        if(this.model){
            var template = this.options.imageTemplate
            var params = this.model.get('additionalParameters');
            
            _.each(params.images, function (selection) {
        
                var image = new SingleImage({
                    el : $(document.createElement('div')),
                    model: new GenericModel(selection),
                    template: _.substitute.bind(_,...