Question

我有以下html：

<input type="text" name="location" id="location-view" class="location-field loc-update-geo js-typeahead-input" placeholder="City / State / Zip" autocomplete="off" />
<input type="hidden" name="zip" id="zip" data-geo-type="zip" />
<input type="hidden" name="lat" id="lat" data-geo-type="lat" />
<input type="hidden" name="lng" id="lng" data-geo-type="lng" />
<ul class="typeahead__results fad js-typeahead-results"/>
//here is li with class of .js-typeahead-selection 
//this populates when a user types in the field

我在表单的视图上使用主干，并尝试在输入上捕获mouseup事件（它具有前面的类型）。由于lis不存在，我可以通过使用（它工作）在控制台中访问它们：

$('.typeahead__results')
.on('mouseup', '.js-typeahead-selection', function(){alert('type') });

但我不太确定如何在我的骨干代码中实现。我有这个：

initialize : function () {
    var that = this;
    $('.typeahead__results')
.on('mouseup', '.js-typeahead-selection', function(){that.getCoordinates();});

但它对我不起作用，我不太确定如何在此上下文中使用listenTo，仍然可以进行地理编码并填充隐藏的字段。

我不是要尝试填充输入，只需点击/选择触发lat / lng查找以填充隐藏字段，当用户单击或选择其中一个预先输入建议时。函数是骨干视图中的getCoordinates。问题是，在用户输入内容之前，具有“.js-typeahead-selection”类的li不存在。这就是为什么我使用'on'来获得父母。我试图弄清楚如何正确引用listenTo或使用'on'正确引用。

Answer 1

listenTo用于监听由骨干对象（如模型集合等）触发的事件，而不是DOM事件。要侦听视图的子元素发出的DOM事件，请在视图上定义events hash。

例如：

Backbone.View.extend({
  initialize: function() {
    this.render();
  },
  events: {
    'mouseup .typeahead__results': 'getCoordinates'
  },
  render: function() {
    /* here you add .typeahead__results and stuff to this view instance, then initialize typeahead functionality and so on*/
  },
  getCoordinates: function() {
    // whatever
  }
});

如何在非exsitent对象骨干上监听事件

1 个答案: