Aurelia，转换器使用内部视图模型答案

【问题标题】：Aurelia, converter use inside view modelAurelia，转换器使用内部视图模型
【发布时间】：2022-01-20 08:10:04
【问题描述】：

使用 Aurelia，我正在尝试在视图模型中使用转换器。但我不知道该怎么做，也不知道有没有可能。

以 AngularJS 为例：
在视图中

<span>{{ 'hello' | uppercase }}</span>

在控制器内部

$filter('uppercase')('hello');

与 Aurelia
在视图中

<span>${ 'hello' | uppercase }</span>

在视图模型中

?????????

【问题讨论】：

你可以在你的视图模型中注入转换器并调用它的 toView() 方法吗？话虽如此，除了一个非常简单的用例之外，我宁愿在 viewmodel 中编写一个 getter 属性并完全放弃转换器，或者在服务中编写转换器逻辑并从您的转换器和 viewModel 调用服务，具体取决于复杂性和在您的应用中使用的次数
这是我期待的答案，谢谢

【解决方案1】：

好的，这很简单。
由于我们的转换器是类，我们只需要从实例调用 toView 方法即可。

import { UppercaseValueConverter } from './converters';

const convertedValue = new UppercaseValueConverter().toView('Hello');

就我而言，我有点迷茫，因为我使用了一个库，无法直接导入转换器类。

【讨论】：

【解决方案2】：

在您的视图模型中添加以下代码：

export class UppercaseValueConverter {
  toView(value) {
    return value?.toUpperCase();
  }
}

然后在你看来：

<h1>${message | uppercase}</h1>

您还可以将值转换器添加到应用的全局资源部分，以便在所有视图之间共享。

【讨论】：