Question

我正在尝试根据表单是否有效，将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对象，因为这些例子似乎意味着我应该得到后者。我的第二个问题是我是否应该以更好的方式做到这一点？

Answer 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

表格变更活动

1 个答案: