Question

我有一个骨干应用程序，通过单击按钮为用户提供显示地图的选项。在CharactersView中，设置'showMap'事件（通过单击#map_button触发）和相应的showMap函数，以在事件触发后显示地图。 CharactersView还渲染了character_template，而character_template包含#map_button和实际的地图代码，类为'map。'如果#map_button位于与地图相同的模板（chracters_template）中，那么一切正常来自CharactersView。但是，如果我将#map_button移动到character_template之外（例如，移动到另一个模板中或直接移动到页面主体中），则不再触发CharactersView中的showMap事件，并且不再在character_template中显示地图。注意，我等到字符模板被渲染到页面之后才尝试单击#map_button并且它仍然无效。

从上面的描述和下面的代码中，您能告诉我这里可能存在的问题以及如何解决它。

代码

在CharactersView中设置事件绑定，以便在单击按钮时显示地图

 events: {

  'click #map_button' : 'showMap'

},

showMap: function(){

      $(".map").toggle();
    }

由字符视图呈现的character_template。显示的类“map”的实际地图位于由字符视图呈现的同一模板中。

<script id="character_template" type="text/x-handlebars">
    <input class='action_button' id='map_button' type='button' value='Show Map' />

   <%= image_tag "http://maps.google.com/maps/api/staticmap?size=300x200&sensor=false&zoom=12&markers={{ latitude }}%2C{{ longitude }}", :class => "map" %>
    </script>

如果我从character_template中删除了该按钮并将其放入另一个tempalte中，则在CharactersView中单击#map_button事件将不再起作用。如果我只是将按钮直接放在html的主体中，这也是同样的结果。

...其他代码省略...

Answer 1

当您使用事件哈希在视图中设置事件时，Backbone最终使用jQuery来监听事件。在Backbone.delegateEvents中，您可以看到以下代码：

this.$el.on(eventName, selector, method);

使用this.$el.on()（其中'this'是您的视图）只监听该视图中的DOM元素（$el是一个缓存的jQuery对象）。

因此，如果将按钮移动到另一个视图，则还需要将事件侦听器添加到该视图中：

events: {

  'click #map_button' : 'showMap'

},

基本上，使用views事件哈希说，'只在此视图的DOM元素中侦听此事件。'

点击事件仅在某个位置按钮时才有效

1 个答案: