0

単一の dom 要素にバインドされた特定のイベントを処理する場合、問題の要素にイベントがあることを明らかにできるようにする方法が必要です... JavaScript を見ずに (二重参照を削除して)。

たとえば、次の単純なテンプレートを見てみましょう。

<script type="text/template" id="template-page">
   <button id="do-something">click me</button>
</script>

問題のどのテンプレート パーサーでも使用されていないシンボルを使用することができ (私の場合、Play! を使用しているので@アウトです)、ボタンがイベントにバインドされていることを開発者に明らかにすることができます。 （実際にこれが機能するかどうかはわかりませんが、要点はわかります）：

<script type="text/template" id="template-page">
   <button id="~do-something">click me</button>
</script>

を使用し~てイベントにバインドされた要素を表すことはできますが、アプリでは 2 回参照されます (上記のテンプレートで 1 回、ビューで 1 回)。

class window.Page extends Backbone.Marionette.Layout

  template: '#template-page'

  events:
    'click button#~do-something': 'doSomething'

これを行うより良い方法はありますか？物事がうまくいかず、結果を理解せずに誤って html に変更を加えてしまうことは非常に簡単です (特に命名パターンが進化する場合など)。1つの方法を考えることができますが、少し問題があります。

おそらく、ビューで変数を指定するのはクールでしょう。

class window.Page extends Backbone.Marionette.Layout

  template: '#template-page'

  @doSomethingButton: 'button#do-something'

  events:
    'click #{doSomethingButton}: 'doSomething'

ただし、この情報をテンプレートに取得できないようです。私は次のようなものを見ました: How to pass additional variables in to underscores templates , but no dice. 理想的には、次のようになります。

<script type="text/template" id="template-page">
   <button id="<%= Page.doSomethingButton %>">click me</button>
</script>

そして、私は私が望む可視性を手に入れるでしょう！これが私が試したことです：http://jsfiddle.net/franklovecchio/FkNwG/248/

4

1 に答える 1

0

これ（あなたのフィドルから）：

@doSomethingButton: 'button#do-something'
events:
  'click #{@doSomethingButton}': 'doSomething'

さまざまな理由で機能しません:

  1. 補間は、単一引用符で囲まれた文字列内では機能しません。
  2. オブジェクトキーでは任意の式を使用できないため、に切り替えて"click #{...}"も役に立ちません。
  3. button#do-somethingイベント仕様およびid属性 ( ) として使用しようとしてid="<%= Page.doSomethingButton %>"いますが、意味がありません。

最初にインスタンスが作成されたときにクラスのイベントを作成して、クラスのイベントを作成するdoSomethingButtonように修正できます。idPage

@doSomethingButton: 'do-something'
initialize: ->
   if(!@constructor::events)
     key = "click button##{Page.doSomethingButton}"
     @constructor::events = { }
     @constructor::events[key] = 'doSomething'

デモ: http://jsfiddle.net/ambiguous/Zzv34/

これは機能しますが、それがどのように役立つかわかりません。レイヤーを追加して混乱させるだけです。

データ属性を使用しない理由がわかりません:

<script type="text/template" id="template-page">
   <button id="do-something" data-is-bound="yes">click me</button>
</script>

次に、誰かがテンプレートをいじって を見たdate-is-bound="yes"場合、他の誰かがそのボタンを気にかけていることを知っているidので、変更を伝播する必要があります。

イベントの明示的なセットを に渡すことができるdelegateEventsため、テンプレートの DOM をたどり、id属性を解釈してイベントを作成できます。id接頭辞付きの s を探しdo-、接尾辞をハンドラ名にマップできます。

events = { }
@$('[id^=do-]').each (i, el) ->
  events["click ##{el.id}"] = el.id.match(/(?:do-)(.*)/)[1]
@delegateEvents(events)

しかし、メソッド名が 2 か所にあるため、まだ行き詰っていますが、少なくとも無言の混乱ではなく、エラーが発生します。

于 2012-08-21T18:34:35.377 に答える