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="hard-wrapper" class="wrapper"></div>
<div id="soft-wrapper" class="wrapper"></div>
CSS
body { font-family: Arial; }
.wrapper {
padding: 10px;
background: #ccc;
margin-bottom: 10px;
}
h1 {
font-weight: bold;
}
JavaScript
var HardView = Backbone.View.extend({
template: "<h1></h1><p></p>",
initialize: function(){
this.model.on( "change", this.render, this );
},
render: function(){
this.$el.html( this.template );
this.$el.find( "h1" ).html( this.model.get( "title" ) );
this.$el.find( "p" ).html( this.model.get( "body" ) );
this.$el.find( "p" ).css( "font-weight", this.model.get( "fontWeight" ) );
return this;
}
});
var SoftView = Backbone.View.extend({
template: "<h1></h1><p></p>",
initialize: function(){
this.model.on( "change:title", this.renderTitle, this );
this.model.on( "change:body", this.renderBody, this );
this.model.on( "change:fontWeight", this.renderFontWeight, this );
},
render: function(){
this.$el.html( this.template );
this.renderTitle();
this.renderBody();
this.renderFontWeight();
return this;
},
renderTitle: function(){
this.$el.find( "h1" ).html( this.model.get( "title" ) );
},
renderBody: function(){
this.$el.find( "p" ).html( this.model.get( "body" ) );
},
renderFontWeight: function(){
this.$el.find( "p" ).css( "font-weight", this.model.get( "fontWeight" ) );
}
});
var model = new Backbone.Model({ title: "The title", body: "The body", fontWeight: 100 });
var myHardView = new HardView({ el: "#hard-wrapper", model: model });
myHardView.render();
var mySoftView = new SoftView({ el: "#soft-wrapper", model: model });
mySoftView.render();
function modifyModel(){
alert("1");
setTimeout( modifyModel, 1000 );
if( Math.random() > 0.5 ) model.set( "title", "Title random " + Math.random() );
if( Math.random() > 0.5 ) model.set( "body", "Body random " + Math.random() );
if( Math.random() > 0.5 ) model.set( "fontWeight", Math.ceil( Math.random() * 10 ) * 100 );
}
modifyModel();