0

ボタンをクリックして地図を表示するオプションをユーザーに提供するバックボーンアプリケーションがあります。CharactersViewでは、対応するshowMap関数を使用して「showMap」イベントが設定され（#map_buttonをクリックしてトリガーされます）、イベントがトリガーされるとマップが表示されます。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からボタンを削除して別のテンプレートに配置すると、CharactersViewのクリック#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 に答える