Question

我使用的是aurelia-validation@1.0.0-beta.1.0.1。

我的情景是：

我有一个包含验证控制器和验证规则的表单
表单中有一个无容器自定义元素，用于包装密码输入，并将当前密码公开为可绑定属性
验证绑定行为用于表单绑定到此自定义元素属性
自定义元素也会引发模糊事件，以便在包装的密码输入失去焦点时触发验证绑定

验证生命周期按预期工作。

我遇到的问题是我使用的自定义渲染器，它目前假设它接收的元素是实际的DOM输入元素，以便可以将类应用于输入，以及兄弟错误元素可以在它旁边注入，但是在这里它接收包装输入的自定义元素，这不能以相同的方式处理，因为它只是一个注释节点。 DOM。

aurelia验证中是否有可以解决此类问题的策略或API？我很难过，并且在验证中使用自定义元素时无法找到很多。

编辑：

以下是自定义元素模板：

<template>
<div class="input-group -password">
    <div class="input-toggle-wrapper">
        <label for="password" class="-hidden" t="fields_Password"></label>

        <input
            id="password"
            type="${isPasswordVisible ? 'text' : 'password'}"
            value.bind="password"
            t="[placeholder]fields_Password"
            maxlength="20"
            focus.trigger="onInputFocus()"
            blur.trigger="onInputBlur()" />

        <div
            class="toggle ${isPasswordVisible ? '-show' : ''}"
            click.delegate="onToggleClick($event)"
            mousedown.delegate="onToggleMouseDown($event)"></div>
    </div>
</div>
</template>

我把它设为无容器，因为我不希望<password-box>作为外部元素发布到DOM中，因为它打破了当前CSS规则的布局（我不想改变它CSS）。

但是，如果自定义元素是无容器的，那么我不知道如何使用表示DOM中自定义元素的注释节点中的DOM导航来访问模板中的第一个div。

Answer 1

不幸的是，Aurelia团队已经确定了这个问题并且（至少截至目前）他们说他们不会解决这个问题。 https://github.com/aurelia/templating/issues/140

这个问题有一个hacky解决方法如下：

if(element.nodeType === 8) {
  element = this.getPreviusElementSibling(element)
}

如果在渲染器的渲染方法中添加它，它应该可以工作。再次，hacky，但它完成了工作，而不是AU团队的正式修复。

在自定义元素中触发自定义渲染器和验证的问题

1 个答案: