无容器自定义元素上的 Aurelia 自定义属性，未获取元素

Question

我在 aurelia 中开发了一个名为 OnScreenKeyboardCustomAttribute 的自定义属性。作业完成后，我试图将其用作包含输入的自定义元素，我希望该元素适用于该输入。默认情况下，我获取属性 class 内的元素，并期望它是输入或文本字段。

但是在该自定义属性上，输入元素位于其他一些元素中。所以我觉得下一步就是搬入element，实现inner input。这是可能的，但是当自定义属性具有无容器注释时，我在属性 class 中没有收到任何元素，而是收到 。那么如何实现内部元素呢？

自定义元素 - viewmodel

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>

自定义属性 - 视图模型

@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-->

Answer 1

如果您使用 containerless，没有元素可以传递给您的自定义属性。这就是使用 containerless 的本质。自定义元素在运行时从标记中删除，但您的自定义属性必须附加到某处，因此框架将其放在 "anchor" 注释元素上。因此，这就是它传递给您的属性的内容。

我的建议，也是始终我的建议，除非绝对必要，否则不要使用 containerless。不要使用 containerless b/c 它 "makes your markup look nicer at runtime" 或者因为 "the custom element being there breaks our CSS." 自从它公开宣布之前我就一直在构建 Aurelia 应用程序，除了包装第三方组件无法修改CSS，我还没有需要使用containerless。我什至有一条不在我的 TSLint 规则中使用它的规则。

像这样的情况正是我避免使用 containerless 的确切原因。它会导致不稳定的问题。自定义元素通常应该只是……元素。无容器元素并不是真正的元素。

无容器自定义元素上的 Aurelia 自定义属性，未获取元素

Aurelia custom attribute on containerless custom element, does not get element

element

custom-attributes

custom-element

aurelia