javascript - 如何跟踪 Marionette.LayoutView 中输入的更改

Question

我当前正在尝试让 LayoutView 中的输入字段来跟踪它何时发生变化。

我的代码如下。

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;

请注意，当发生更改时，它不会执行任何操作，即不会触发事件。

我怎样才能在 Backbone /Marionette 中实现这一点？

Answer 1

我更新了您的fiddle 。事件绑定(bind)没有任何本质错误。您所要做的就是 .extend() 一个 Marionette.LayoutView，而不是 Backbone.LayoutView。

在我的 fiddle 中，我决定使用模板填充 el，而不是通过指定 el，但您的方法确实没有任何问题。

考虑到上述几点，您的新代码将如下所示

模板

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

代码

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