How to track change on an input in a Marionette.LayoutView

Question

I am current trying to get my input field in a LayoutView to track when it's change as they happen.

I the code as follows.

https://jsfiddle.net/nyTZU/10/

<div id="view-goes-here">
<div id="listing_filter">
    Price: <input type="text" id="listing_filter_price" />
    Beds: <input type="text" id="listing_filter_bedroom" />
    Baths: <input type="text" id="listing_filter_bathroom" />
</div>

var V = Backbone.LayoutView.extend({
el: '#listing_filter',
events: {
    'change input': 'updateFilter'
},
updateFilter: function() {
    alert('hey');
}


 });
   var v = new V;

Notice that the when a change happens it does nothing ie fires not event.

How can i achieve this in backbone/marionette ??

Answer 1

I updated your fiddle . There was nothing intrinsically wrong with the event binding. All you had to do was .extend() a Marionette.LayoutView , not a Backbone.LayoutView .

In my fiddle I decide to populate the el with a template, rather than by specifying the el , but there's really nothing wrong your approach.

Taking the points above into consideration your new code will look like this

template

<script type="text/template" id="listing_filter">
  <p>
    Price: <input type="text" id="listing_filter_price" />
    Beds: <input type="text" id="listing_filter_bedroom" />
    Baths: <input type="text" id="listing_filter_bathroom" />
  </p>
</script>

<div id="view-goes-here">

</div>

code

var V = Marionette.LayoutView.extend({
template: '#listing_filter',
events: {
    'change input': 'updateFilter'
},
updateFilter: function() {
    alert('hey');
}
});

var v = new V;
v.render();
$('#view-goes-here').append(v.el);

Answer 2

You need to extend Backbone.Marionette.LayoutView , not Backbone.LayoutView . Your code works fine if you extend the proper library.

Corrected code - JSFiddle .

Also worth noting is that the change event does not fire until you unfocus the input.