JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/documentcloud/underscore/ba3e31b53ef5752b40cfb2d71f594536fefbe916/underscore-min.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone-min.js"></script>
<div id="view1"></div>
<div id="view2"></div>
<div id="view3"></div>
CSS
body { font-family: Arial; }
JavaScript
var View1 = Backbone.View.extend({
el: "#view1",
attributes: {
id: "my-id",
class: "myclass1 myclass2"
},
render: function(){
this.$el.html( "View1 div, id: " + this.$el.attr( "id" ) + ", class: " + this.$el.attr( "class" ) );
return this;
}
});
var View2 = Backbone.View.extend({
attributes: {
id: "my-id",
class: "myclass1 myclass2"
},
render: function(){
this.$el.html( "View2 div, id: " + this.$el.attr( "id" ) + ", class: " + this.$el.attr( "class" ) );
return this;
}
})
var View3 = Backbone.View.extend({
el: "#view3",
initialize: function(){
this.$el.attr( "id", "my-id" );
this.$el.attr( "class", "myclass1 myclass2" );
},
render: function(){
this.$el.html( "View3 div, id: " + this.$el.attr( "id" ) + ", class: " + this.$el.attr( "class" ) );
return this;
}
})
var view1 = new View1;
view1.render();
var view2 = new View2;
$("#view2").html( view2.render().el );
var view3 = new View3;
view3.render();