Question

我目前正试图在LayoutView中获取我的输入字段，以便跟踪它何时发生变化。

我的代码如下。

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

请注意，更改发生时它什么都不做，即不发生事件。

我怎样才能在骨干/牵线木偶中实现这一目标？

Answer 1

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

在我的小提琴中，我决定用模板填充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);

Answer 2

您需要扩展Backbone.Marionette.LayoutView，而不是Backbone.LayoutView。如果扩展适当的库，您的代码可以正常工作。

更正后的代码 - JSFiddle。

另外值得注意的是，在您取消聚焦输入之前，更改事件不会触发。

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

2 个答案:

模板

码