2011-07-15 2 views
2

私のウィジェットをインスタンス化する際に、私は私のクリックハンドラを定義する場合:Dijitウィジェットのクラス宣言にイベントハンドラを配置できないのはなぜですか?

new W2({onClick: a_function}); 

postMixinProperies中またはpostCreate中:

dojo.declare("W2", [W1], { 
    postMixInProperties: function(){ 
     this.onClick= a_function; 
    } 
}); 

または宣言の1

<div data-dojo-type="W2"> 
    <script 
     type="dojo/connect" 
     data-dojo-event="onClick"> 
     a_function.call(this); 
    </script> 
</div> 

道場はないに近づく経由その魔法のようになり、domNodeのonclickイベントが私のonClickハンドラ。

しかし、私は接続が明らかに壊れますクラス宣言にonClick定義置く場合:

dojo.declare("W2", [W1], { 
    onClick: a_function 
}); 

をそれはもうonclickイベント後に自動的に呼び出されていない、直接my_widget.onClickを呼び出すことも可能です。

なぜこのようなことが起こりますか、これは正常で、私のウィジェットクラスのイベントハンドラを定義するための「標準的な方法」は何ですか?


編集:W1ためコード:

dojo.declare("W1", [dijit._Widget, dijit._Templated], { 
    label: 'defaultLabel', 
    templateString: '<div>${label}</div>' 
}); 
+0

W1のコードを表示できますか? –

+0

@flammon - もちろんです。興味深い。 – hugomg

答えて

2

あなたが関数にDOMイベントを接続するためのテンプレートウィジェット内の添付イベントを定義する必要があります。

は次のようにいろいろ書いをやってみてください。

dojo.declare("W1", [dijit._Widget, dijit._Templated], { 
    label: 'defaultLabel' 
    , templateString: "<div data-dojo-attach-event='onclick: onClick'>${label}</div>" 
}); 

次に、あなたのクラス宣言でのonClickを置くことができ、それはDOMイベントに接続されます。ウィジェットがテンプレート化されていないと、スーパークラスがすでにのonClickという名前の関数にDOMイベントを接続している場合

dojo.declare("W2", [W1], { 
    onClick: a_function 
}); 

、その後、onClickの機能を設定するだけで動作します。

dojo.declare("W1", [dijit._Widget, dijit.form.Button], { 
    label: 'defaultLabel' 
}); 

ウィジェットがテンプレート化されておらず、スーパークラスは、関数へのDOMイベントを接続していない場合は、その接続をする必要があります。

dojo.declare("W1", [dijit._Widget], { 
    label: 'defaultLabel' 
    , postCreate: function() { 
     this.inherited(arguments); 
     dojo.create('div', {innerHTML: 'defaultLabel'}, this.domNode) 
     this.connect(this.domNode, "onclick", "onClick"); 
    } 
}); 
+0

私のウィジェットがテンプレート化されていない場合、どうすればいいですか? – hugomg

+0

テンプレートレスのウィジェットの例を含めるように更新されました。 –

+0

これは、私がこれを理解しようとしたテストと完全に一致しています。 – hugomg

関連する問題