<main></main>

.btn-reset {
  display:block;
  margin:10px 0;  
}

var CountedTextView = Backbone.View.extend({
  tagName: 'div',
  
  templateText: Handlebars.compile('<textarea>{{text}}</textarea><button class="btn-reset">Reset</button>'),
  
  templateCount: Handlebars.compile('<p>You typed {{count}} characters in the box</p>'),
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  
  events: {
    'input textarea': 'textChanged',
    'click .btn-reset': 'resetText'
  },
  
  resetText: function(ev) {
    this.model.revert();
  },
  
  textChanged: function(ev) {
    this.model.set({text: ev.target.value });
  },
  
  initDOM: function(state) {
    this.$el.html(this.templateText(state) + this.templateCount(state));
  },
  
  
  render: function() {
    
    var state = {
      text: this.model.toJSON().text,
      count: this.model.toJSON().text.length
    };
    
    if ( ! this.$el.html() ) {
      this.initDOM(state);
    }

    var $ta = $('textarea', this.$el);
    var $count = $('p', this.$el);
    
    $ta.val(state.text);
    $count.html(this.templateCount(state));

    return this;
  }
  
});

var initialText = "type something";
var CountedTextModel = Backbone.Model.extend({
  defaults: {
    text: initialText
  },
  revert: function() {
    this.set({text: initialText});
  }
});

var myModel = new CountedTextModel();
var myView = new CountedTextView({model: myModel});
$('main').append(myView.$el);
myView.render();