dijit.Dialog isValid 检查始终为真

Question

我有一个dijit.Dialog，其中包含两个必须有效的元素才能提交。 Dialog 以编程方式创建，其内容在构造函数的选项哈希中指定。内容确实包含声明性小部件，并且对话框的参数parseOnLoad 设置为true，以便解析器（应该）实例化所有小部件，然后调用它们的启动方法。创建对话框实例后，我为验证状态的更改注册了一个回调：

var dialog = new Dialog({
    title: 'Login',
    parseOnLoad: true,
    content: dialogContent
});
dialog.watch('state', function(){
    //is never called when changing the input fields.
    //onValidStateChange is not being fired either.
});
dialog.startup();
dialog.show();

dialogContent定义如下：

<div class="dijitDialogPaneContentArea">
    <table>
        <tr>
            <td>CustomerID: </td>
            <td><div name="user" required="true" trim="true" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="pattern: '[0-9]{5,7}', _formatter: function(){}"></div></td>
        </tr>
        <tr>
            <td>Password: </td>
            <td><div name="password" type="password" required="true" data-dojo-type="dijit/form/ValidationTextBox"></div></td>
        </tr>
    </table>
</div>
<div class="dijitDialogPaneActionBar">
    <div data-dojo-type="dojox/form/BusyButton" type="submit" data-dojo-props="disabled: true">OK</div>
</div>

这里是 JSFiddle 的情况：http://jsfiddle.net/rSbZP/3/

就像验证回调方法中提到的：它永远不会被对话框调用/触发。无论输入字段的内容是什么，调用对话框的isValid() 函数总是返回true，而validate() 函数总是返回正确的结果。对话框的result 属性始终为空字符串。经过几个小时的测试，我意识到当我再次手动调用对话框的startup() 方法时，它突然开始工作了。我还认识到对话框显示 before 它的小部件正在实例化并显示（大约 1 秒后发生），因此调用对话框的 startup() 方法在子小部件被实例化之前（所以子小部件没有被启动，我猜？）。所以我尝试为自动调用的解析器注册一个回调来手动调用startup()方法，但我一直找不到Promise或其他任何要注册的东西。

一段时间后，我发现了这个解决方法（我正在使用对话框的onShow 事件手动启动解析器并为其注册回调）：

var dialog = new Dialog({
    title: 'Login',
    parseOnLoad: false,
    content: dialogContent,
    onShow: function(){
        parser.parse().then(function(){
            dialog.startup();
        });
    }
});

通过这样做，对话框的startup() 函数会在解析器在手动启动后完成时被调用。 这是这样做的目的吗？我是否遗漏了一些重要的东西，或者我正在做的事情完全错了？

Answer 1

Dialog 小部件是通过编程方式创建的。因此，在对话框级别进行验证之前，您需要将所有子小部件连接到对话框。但是，从第二次开始，它会起作用，但在第一次时，它不会按预期工作。为了克服这个问题，我们需要在验证之前调用 Dialog 上的“connectChildren”方法。这将确保该时刻的所有子小部件都连接到 Dialog 小部件节点。

testValid = function () {
    dialog.connectChildren();
    alert(dialog.isValid());
};
testValidate = function () {
    dialog.connectChildren();
    alert(dialog.validate());
};

现在检查结果是否符合预期。请参考更新后的jsFiddle