JSFiddle - React, Tailwind, and code Playground

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>
<script type='text/template' id='template'>
<div class='<%= valid ? "valid" : "invalid" %>'><%= test %></div>
    <div style="background-color: hsl(<%= hsl.h %>, <%= hsl.s %>, <%= hsl.l %>);">color test</div>
<hr/>
</script>
<div id="container"></div>

CSS

.valid { background: green; }
.invalid { background: red; }
#container { color: white; }

JavaScript

var MyModel = Backbone.Model.extend({
    initialize: function() {
        console.log("initializing...");
        if (!this.isValid()) {
            this.clear({silent: true});
            this.set(this.defaults, { silent: true });
        }
    },
    
    defaults: {
        test: "default value",
        name: "",
        valid: false, hsl: {
            h: 120, s: "100%", l: "50%"
        }
    },
    validate: function(attrs) {
        if (attrs.valid !== true) {
            return "error";
        }
    }        
});

var model1 = new MyModel({ test: "invalid", name: "this is an invalid model", valid: false });

var model2 = new MyModel({ test: "valid", name: "this model is valid", valid: true, hsl: {
    h: 180, s: "100%", l: "50%"
} });

var MyView = Backbone.View.extend({
    template: _.template($("#template").html()),

    el: "#container",

    initialize: function() {
        this.render();
    },
    
    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
    }        
});

var view1 = new MyView({ model: model1 });
var view2 = new MyView({ model: model2 });