JSFiddle - React, Tailwind, and code Playground

by BratmanDu

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://rawgit.com/jashkenas/underscore/e4743ab712b8ab42ad4ccb48b155034d02394e4d/underscore-min.js"></script>
<script src="https://rawgit.com/jashkenas/backbone/8ec88604732944f197b352a6be22c8216ea9d3a1/backbone-min.js"></script>
<body>
  <div id="container-movie"></div>
  <script type="text/template" id="template-movie">
		Title: <%=title%>;
		Rating: <%=mpaaRating%>
	</script>  
</body>

JavaScript

var Movie = Backbone.Model.extend({});

var MovieView = Backbone.View.extend({
	el: "#container-movie",
  template: _.template($("#template-movie").html()),
  initialize: function() {
    this.listenTo(this.model, 'change', this.render, this);
	},
  
  render: function() {
  	console.log("MovieView render; Movie Title: " + this.model.get("title"));
    var htmlOutput = this.template(this.model.toJSON());
    this.$el.html(htmlOutput);
    return this;
	}
})

var movie = new Movie({title: "The Lion King", mpaaRating: "R"});
var movieView = new MovieView({model: movie});

movie.set({title: "Titanic"});
movie.set({title: "The Godfather"});