0

我有一个主干应用程序，它为用户提供了通过单击按钮来显示地图的选项。在 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();
    }

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

<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 中删除按钮并将其放入另一个模板中，则 CharactersView 中的 click #map_button 事件不再起作用。如果我只是将按钮直接放在html的正文中，结果也是一样的。

...省略了其他代码...
4

1 回答 1

1

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

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

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

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

events: {

  'click #map_button' : 'showMap'

},

基本上，使用视图事件哈希是说，“仅在此视图的 DOM 元素内收听此事件。”

于 2013-01-27T18:32:24.923 回答