如何在使用 aurelia 时使用值转换器或任何其他方法绑定和显示绑定的值答案

【问题标题】：How to bind and show the value bound while using aurelia either using value converters or any other method如何在使用 aurelia 时使用值转换器或任何其他方法绑定和显示绑定的值
【发布时间】：2019-06-15 01:48:03
【问题描述】：

我正在尝试使用 aurelia 值转换器来解析用户输入的值，方法是删除输入字段中输入的所有非法字符并显示解析后的文本。但是在少数情况下，我无法向用户显示解析的文本，而是显示输入的带有非法字符的文本。事实上，输入的文本实际上是被解析的，所以我想知道可以改变什么来显示解析的文本。

我尝试包含两个替换正则表达式语句，但似乎没有任何纠正。

值转换器 clean-string.ts:

 export class CleanStringValueConverter {
   fromView(val) {
     val = val
           .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
           .replace(/([^a-z 0-9]+)/gi, "")
           .trim();
     console.log(val);
     return val;
   }
 }

app.html:

 <template>
      <require from="./clean-string"></require>

      <h3>Enter text with illegal charaters</h3>
      <input type="text" value.bind="dirtyString | cleanString" />
 </template>

app.ts:

  export class DCString{
    dirtyString: string;
  }

例如：我输入'随机####' 我希望在输入最后一个字符时在输入字段中显示“随机”，因为我正在解析非法字符。

但我只是在文本字段上看到“随机####”，除非我输入一个额外的字符然后触发解析。

那么有没有办法解决这个问题？我需要进行哪些更改才能使其正常工作？提前感谢您的投入！！

这是正在发生的事情的 sn-p：

从控制台我们可以看到实际上输入的文本已按我的需要进行了解析，但并未在输入字段上显示为已解析的文本，即使这是绑定到输入的值。

以下是上述代码的代码框链接： sandbox link

更新：

我通过使用按键事件尝试了 cmets 的建议之一。在您粘贴包含所有非法字符的字符串之前，它就像一个魅力。有没有办法解决这个问题？

【问题讨论】：

使用“toView”方法。参考：aurelia.io/docs/binding/value-converters#simple-converters
尝试使用以下内容设置您的 clean-string.ts：export class CleanStringValueConverter { toView(dirtyString) { return dirtyString.replace(/[^a-z 0-9]+/gi, ""); } } 和 app.ts 到 export class Color { dirtyString=""; }
也许这个链接stackoverflow.com/questions/36507344/…已经回答了。为了防止每个键，您应该使用带有验证表达式的键事件。这是您的沙盒的修改版本：codesandbox.io/s/…
@CristiánOrmazábal 您的解决方案运行良好，尽管我试图弄清楚使用价值转换器使其工作。你能解释一下下面的按键返回语句是如何工作的吗.. keypress(event) { return !/[|!\/&*:;$%@#`'_"^()+-.,\] /.test(event.key); }
@WiktorStribiżew 我尝试了您的建议，似乎尝试输入非法字符有效，但在某些极端情况下，该值出现在输入字段中。比如尝试连续输入相同的非法字符，字符出现又消失。所以认为 CristiánOrmazába 解决方案解决了它。但是根据我的问题，如果可以通过使用值转换器完全破解这将是很有趣的

标签： javascript regex aurelia

【解决方案1】：

我觉得这就是我一直在寻找的，我觉得我找到了解决方案。我不得不使用值转换器、按键事件和 updateTrigger 绑定规则的概念来轻松完成这项工作。如果您找到更好的解决方案，请告诉我:)

非常感谢您迄今为止的所有投入 :)

这就是我所做的：

app.html

  <template>
    <require from="./clean-string"></require>

    <h3>Enter text with illegal charaters</h3>
    <input
         type="text"
         value.bind="dirtyString | cleanString & updateTrigger:'blur'"
         keypress.delegate="keypress($event)"
    />
    <p>${dirtyString}</p>
  </template>

clean-string.ts

export class CleanStringValueConverter {
  fromView(val) {
    val = val
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return val;
  }

  toView(dirtyString) {
    dirtyString = dirtyString
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return dirtyString;
  }
}

app.ts

export class Color {
  dirtyString = "";

  keypress(event) {
    return /([a-z 0-9]+)/gi.test(event.key);
    // return !/[|!/&*:;$%@#`'_"^<>()+-.,\\]/.test(event.key);
  }
}

link to working code

也可以在 aurelia 网站上找到讨论： discussion link

【讨论】：