我正在aurelia中开发一个名为OnScreenKeyboardCustomAttribute
的自定义属性。作业完成后,我试图使用一个包含输入的自定义元素,并且希望该元素在该输入上工作。默认情况下,我将元素放入属性类中,并希望将其输入或输入文本字段。
但是在该自定义属性上时,输入元素位于其他一些元素内。因此,我认为下一步是进入元素并实现内部输入。这是可能的,但是当自定义属性具有无容器注释时,我在属性类中没有收到任何元素,而是收到了<!--anchor-->
。那么如何实现内部元素呢?
自定义元素-视图模型
import {
containerless,
} from 'aurelia-framework';
@containerless()
export class CInputCustomAttribute {
}
自定义元素-视图
<template>
<div class.bind="paClass ? paClass : 'row margin_bottom'">
<div class.bind="labelClass ? labelClass : 'column_large_3 column_small_4'">
<label for="${id}" class="label_inline" class.bind="errors.length ? 'text_red' : '' "><span class="required_star"
if.bind="star">*</span>${label}</label>
</div>
<div class.bind="inputClass ? inputClass : 'column_large_9 column_small_8'">
<input id="${id}" placeholder="${placeholder}" class="input toggle_input" class.bind="errors.length ? 'validate-error' : '' "
value.bind="value" type="${type}" maxlength="${max ? max : 5000}" click.trigger="typeof runFunction=='function' ? runFunction():''">
<span class="message_red">
<template repeat.for="error of errors">
${error.error.message}<br>
</template>
</span>
</div>
<slot></slot>
</div>
</template>
自定义属性-viewmodel
@inject(Element, BindingEngine)
export class PaOnScreenKeyboardCustomAttribute {
constructor(element, bindingEngine) {
this.element = element;
console.log(this.element);
}
用法
<c-input type="text" id="username" pa-on-screen-keyboard max="11">
console: <!--anchor-->
答案 0 :(得分:2)
如果使用containerless
,则没有 元素传递给您的自定义属性。这就是使用containerless
的本质。在运行时从标记中删除了custom元素,但是必须在 somewhere 处附加您的custom属性,因此框架将其放在“ anchor”注释元素上。因此,这就是它传递给您的属性的原因。
我的建议(这始终是我的我的建议)是除非绝对必要,否则不要使用containerless
。不要使用containerless
b / c,它“使您的标记在运行时看起来更好”,或者因为“其中的自定义元素破坏了我们的CSS”。自从Aurelia应用程序公开发布之前,我就一直在构建它。除了包装我无法修改CSS的第三方组件之外,我还需要使用containerless
。我什至有一条规则,不要在我的TSLint规则中使用它。
这种情况正是我避免使用containerless
的确切原因。它会引起问题。自定义元素通常应该只是那个..元素。而且,无容器元素并不是真正的元素。