Пользовательский атрибут Aurelia для пользовательского элемента без контейнера, не получает элемент

Question

Я разрабатывал пользовательский атрибут с именем OnScreenKeyboardCustomAttribute в aurelia.После выполнения заданий я пытался использовать его как пользовательский элемент, который включает в себя вход, и я хочу, чтобы этот элемент работал с этим входом.По умолчанию я получаю элемент внутри класса атрибута и ожидаю, что это будет поле ввода или текстовое поле.

Но в то время как в этом пользовательском атрибуте элемент ввода находится внутри некоторых других элементов.Поэтому я думаю, что следующий шаг - перейти к элементу и достичь внутреннего вклада.Это возможно, но когда пользовательский атрибут имеет аннотацию без контейнера, я не получаю элемент внутри класса атрибута и вместо этого получаю <!--anchor-->.Итак, как мне достичь внутреннего элемента?

пользовательский элемент - 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>

пользовательский атрибут - 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-->

Answer 1

Если вы используете containerless, то не элемент для передачи в ваш пользовательский атрибут.Такова природа использования containerless.Пользовательский элемент удаляется из разметки во время выполнения, но ваш пользовательский атрибут должен быть прикреплен где-то , поэтому платформа помещает его в элемент комментария «привязка».И, таким образом, это то, что он передает в ваш атрибут.

Моя рекомендация, а это всегда Моя рекомендация - не использовать containerless, если это не является абсолютно необходимым.Не используйте containerless b / c, так как «ваша разметка будет выглядеть лучше во время выполнения» или потому, что «находящийся там пользовательский элемент нарушает наш CSS».Я создавал приложения Aurelia еще до того, как об этом было объявлено публично, и, кроме упаковки сторонних компонентов, где я не могу изменить CSS, мне еще нужно использовать containerless.У меня даже есть правило не использовать его в моих правилах TSLint.

И такая ситуация - точная причина, по которой я избегаю использования containerless.Это вызывает сомнительные проблемы.Пользовательские элементы обычно должны быть просто элементами.И элемент без контейнера на самом деле не элемент.