自定義渲染器和自定義元素中觸發的驗證問題

我正在使用[email protected]。自定義渲染器和自定義元素中觸發的驗證問題

我的情況是：

我有其中有一個驗證器和驗證規則形式
沒有在包裝了一個密碼輸入形式無容器自定義元素，並展示當前密碼的綁定屬性
的驗證綁定行爲被用在窗體的綁定到這個自定義元素屬性
自定義元素也提出了模糊事件，使驗證綁定時觸發包裹密碼輸入失去焦點

驗證生命週期按預期工作。

我遇到的問題是我正在使用的自定義渲染器，它目前假定它接收的元素是實際的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。

來源

2017-02-15 Sam

你能分享你的自定義元素的代碼嗎？「@無容器」的任何特定原因？也許你將不得不檢查元素是一個真正的HTMLInputElement還是註釋，然後選擇正確的策略 –

我添加了模板代碼。 – Sam

不幸的是，Aurelia團隊發現了這個問題，並且（至少現在）表示他們不會解決這個問題。 https://github.com/aurelia/templating/issues/140

沒有爲這一問題的解決方法哈克如下：

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

如果添加了內渲染爲您呈現方式，它應該工作。再次，哈克，但它完成工作，而不是來自非盟小組的官方修復。

來源

2018-02-08 14:53:09

我們最終創建了一個解決方案，允許自定義元素通過實現自定義界面與父上下文中的驗證進行交互 - 當驗證渲染器檢查用於附加消息的元素時，它可以查看元素是否爲自定義元素並通過驗證通過與自定義元素交互作爲一個接口（稱爲IHasCustomValidation）來指令它，所以自定義元素可以返回內部元素，這在實踐中非常有效。 – Sam

自定義渲染器和自定義元素中觸發的驗證問題

回答

相關問題