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.

此脚本旨在根据表单是否有效更改提交按钮的类别。我的第一个问题是为什么这个例程获取 DOM 对象this而不是 Dijit 对象，因为这些示例似乎暗示我应该获取后者。我的第二个问题是我是否应该以更好的方式做到这一点？

4

1 回答 1

1

检查target您收到的事件的属性：您很可能从表单中收到它，从表单中的实际控件冒泡（通过 HTML 事件冒泡）。它是原生 DOM 事件，而不是更高级别的 Dojo 事件，因此this 是 DOM 节点。

有时使用一段普通的 JavaScript 代码而不是dojo/on脚本更容易，并用于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 回答