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>
<div id="container"></div>

<script type='text/template' id='say-template'>
    <div class='say-container'>
        <div class="title"><%= title %></div>
        <input id="input" type='text' value='<%= text %>' />
        <div class="message"><%= message %></div>
    </div>
</script>

CSS

.title { font-weight: bold; font-size: larger; }
.message { color: green; }

JavaScript

var SayView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.render();
        this.model.on("change", this.render, this);
    },

    el: "#container",

    template: _.template($("#say-template").html()),

    events: {
        "change #input": "update"
    },
    
    update: function(e) {
        this.model.set("text", $(e.target).val());
        this.model.set("message", "Model value 'text' changed to '" + this.model.get('text') + "'");
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

var sayModel = new Backbone.Model({ title: "initial value", text: "enter text here", message: "" });
var sayView = new SayView({ model: sayModel });

setTimeout(function() {
   sayModel.set("title", "changed!"); 
}, 2000);