Question

我想创建一个自定义属性输入格式我可以为属性分配两个值，使我可以清理输入字符串或修剪输入字符串。

像下面这样：

对于值 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)"
      />

类似 trim

    <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是已经根据需要声明的值转换器和keypress函数。我在创建自定义属性方面需要帮助，因为我不确定是否将当前 value 绑定到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;
}

这是我要整理的链接： sand box link

在Aurelia中的输入html元素上创建自定义属性

0 个答案: