JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="container"></div>

<script type='text/template' id='condition-template'>
    <div class='condition'>
        <div><%= term %></div>
        <div class='author'><%= snomed_concept_id %></div>
    </div>
</script>

CSS

.condition { margin: 10px; background: #EFEFEF; padding: 10px; }
.author { color: blue; font-size: smaller; text-align: right; }
.comment { margin-left: 10%; padding: 10px; background: white; }

JavaScript

var ConditionModel = Backbone.Model.extend({
    defaults : {
        snomed_concept_id : "",
        term : "",
        synonyms : undefined
    }
})

var ConditionCollection = Backbone.Collection.extend({ model : ConditionModel });

var ConditionsView = Backbone.View.extend({
    el: "#container",
    template: _.template($("#condition-template").html()),
    render: function() {
        var self = this;
        _.each(this.model.toJSON(), function(condition) {
            self.$el.append(self.template(condition));            
        });
    }
});
    

var url = "https://api.howareyou.com/conditions/search.json";
var conditionModels;
var self = this;
var params = _.extend({
    async: false,
    url: url,
    data: {
        term: 'car',
        limit: 50
    },
    success: function(data) {
        var models = data.map(function(condition) { return new ConditionModel(condition); });
        var conditions = new ConditionCollection(models);        
        var view = new ConditionsView({ model: conditions });
        view.render();
    }
}, {});

$.ajax(params);