0

フォームが有効かどうかに基づいて、ボタンの CSS クラスを「アクティブ」から「非アクティブ」に変更しようとしています。

だから私はこの宣言的なビットを持っています...

<form data-dojo-type="dijit/form/Form" id="myForm" action="http://somthing">
<script type="dojo/on" data-dojo-event="change" data-dojo-args="e">
// for some reason change returns dom object not dijit object....
var self = dijit.byId( this.id);
require( [ 'dojo/dom-class' ], function (domClass) {
    var tmp, on = 'active' , off = 'inactive';
    if (self.get('state')) {
        // invalid
        tmp = off; off=on; on=tmp;
    }
domClass.replace( 'complete', on, off);
});
</script>
..rest of form and submit button with id='complete' is here.

このスクリプトは、フォームが有効かどうかに応じて送信ボタンのクラスを変更することを目的としています。私の最初の質問は、なぜこのルーチンがthisDijit オブジェクトではなく DOM オブジェクトを取得するのかということです。私の2番目の質問は、これをより良い方法で行うべきかどうかです。

4

1 に答える 1

1

受け取ったイベントのプロパティを確認してtargetください。おそらく、フォーム内の実際のコントロールから (HTML イベントのバブリングを介して) バブリングされて、フォームからイベントを受け取っています。これは、高レベルの Dojo イベントではなく、ネイティブ DOM イベントであるためthis 、DOM ノードです。

dojo/onスクリプトの代わりに単純な古い JavaScript コードを使用dojo/onして、手動でサブスクライブする方が簡単な場合があります。魔法のようなものはありません。次に、何を購読しているかを正確に確認できます。

require(['dojo/on'], function (on) {
  var myForm = dijit.byId("myForm");
  on(form, "change", function(evt) {
    // Handle the event here, referring to myForm rather than trying to
    // work with 'this'.
  });
});

有効性のチェックを含むその他の例は、http: //dojotoolkit.org/reference-guide/1.9/dijit/form/Form.html#using-native-form-elementsにあります。

于 2013-07-29T18:48:30.987 に答える