Создание пользовательского атрибута для входного HTML-элемента в Aurelia - PullRequest
Новая
       51

Создание пользовательского атрибута для входного HTML-элемента в Aurelia

0 голосов
/ 18 июня 2019

Я хочу создать собственный формат ввода атрибута Я могу присвоить атрибуту два значения, которые позволят мне очистить строку ввода или обрезать строку ввода.

Как показано ниже:

Для значения clean :

Попытка добиться объявления, как показано ниже 

    <input
         type="text"
         placeholder="enter text with illegal characters"
         value.bind="dirtyString"
         input-format= "format : clean"
    />

Приведенное выше должно привести меня с вложенным ниже в элемент ввода: 

     <input
            type="text"
            placeholder="enter text with illegal characters"
            value.bind="dirtyString | cleanString & updateTrigger:'blur'"
            keypress.delegate="keypress($event)"
      />

Аналогично для отделка 

    <input
         type="text"
         placeholder="enter your name"
         value.bind="Name"
         input-format= "format : trim"
     />

должно привести к: 

    <input
        type="text"
        placeholder="enter your name"
        value.bind="Name | trimString & updateTrigger:'blur'"
    />

где cleanString, trimString - это преобразователи значений и функция нажатия клавиш, которые уже объявлены как необходимые. Мне нужна помощь в создании пользовательского атрибута, так как я не уверен в получении текущего значения , связанного с html-элементом ввода, а также переназначении этого, чтобы иметь все вышеупомянутые преобразователи значений и функцию.

Может кто-нибудь помочь мне в достижении этого? Ценю ваш вклад и помощь.

Вот где я стою: 

import * as au from "aurelia-framework";

@au.autoinject
@au.customAttribute("input-format")
export class InputFormat {
  constructor(element: Element) {
    this.element = element;
  }

  @au.bindable
  format: string;
  formatChanged(name: string, newValue: string, oldValue: string) {
    // need to have case statements 
    switch(name){
        case 'clean':
          // to assign the relevant value converter and the 'value' is to be passed into
          // this assigment should result something like below
          // <input
          // type="text"
          // value.bind="Name | cleanString & updateTrigger:'blur'"
          // keypress.delegate="keypress($event)"
         //  >
          break;
        case 'trim':
          // to assign the relevant value converter the 'value' is to be passed into
          // <input
          // type="text"
          // value.bind="Name | trimString"          
         //  >
          break;
        default:
          // to leave the assigment as is 
          break;
      }

  }
  // the select list
  element: Element;
  val: any;
}

вот ссылка, где я пытаюсь собрать вещи вместе: песочница ссылка

...