CODEWITHSUNDEEP
javascriptjquerybackbone.jsmarionette
Ikenna
Ikenna

Reputation: 1059

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

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 ??

Upvotes: 1

Views: 2211

Answers (2)

seebiscuit
seebiscuit

Reputation: 5063

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);

Upvotes: 1

Michael.Lumley
Michael.Lumley

Reputation: 2385

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.

Upvotes: 0

Related Questions