JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.stickit/0.9.2/backbone.stickit.js"></script>

JavaScript

var MyAbstractView = Backbone.View.extend({
	getTemplate: function(){
		if(!this.templateFn){
			this.templateFn = _.template(this.template)
		}
		return this.templateFn
	},
	render: function(){
		var template = this.getTemplate()
		var context = this.getContext()
		var str = template(context)
		this.$el.html(str)
		this.stickit()
	},
	getContext: function(){
		return {}
	}
})

var MyView1 = MyAbstractView.extend({
	bindings: {
		'[name="name"]': 'name',
		'[name="gender"]': 'gender'
	},
	template: `
		<form>
		Name: <input name="name" type="text">
		<br>
		Gender: 
		<select name="gender">
			<option value="male" data-custom1="dont-delete-me-please">Male</option>
			<option value="female">Female</option>
		</select>
		</form>
	`,
	getContext: function(){
		return this
	}	
})


var model1 = new Backbone.Model()
model1.set('name', 'seba')
model1.set('gender', 'female')
model1.on('change', ()=>console.log('model changed!'))

var view1 = new MyView1()
view1.model = model1
view1.$el = $('body')
view1.render()