Marionette.View modelEvents

by david_i_smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.4/backbone.marionette.min.js"></script>
<div id="container"></div>
<script id="template" type="text/template">
  <input type="text" value="<%= value %>">
	<input class="js-change" type="button" value="Change">
	<input class="js-reset" type="reset" value="Reset">
</script>

JavaScript

var View = Marionette.ItemView.extend({
	template: _.template($('#template').html()),
  modelEvents: {
  	'change': 'render'
  },
  events: {
  	'click .js-change': 'change',
  	'click .js-reset': 'reset'
  },
  change: function (e) {
    this.model.set('value', 'two');
  },
  reset: function (e) {
    this.model.set('value', 'one');
  }
});

var model = new Backbone.Model({
	value: 'one'
});

var view = new View({
  model: model
});

var region = new Marionette.Region({
	el: $('#container')
});

region.show(view);