Aurelia 动态绑定值转换器

Question

我遇到了 Aurelia 的问题，并假设我缺少某些东西。

我正在尝试创建一个“通用”网格。我删除了很多 html 以保持示例简短，但基本思想是这样的：

<template>
<require from="../value-converters"></require>
  <table show.bind="rows.length">
    <thead>
      <tr>
        <th repeat.for="columnDefinition of columnDefinitions">
          ${columnDefinition.displayName}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of rows">
        <td repeat.for="columnDefinition of columnDefinitions">
          <span if.bind="columnDefinition.isCurrency">${row[columnDefinition.propertyName] | numeralFormatter}</span>
          <span if.bind="columnDefinition.isDate">${row[columnDefinition.propertyName] | dateFormatter}</span>
          <span if.bind="!columnDefinition.isCurrency && !columnDefinition.isDate &&">${row[columnDefinition.propertyName]}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

我希望能够使用 ValueConverters 来帮助正确显示某些类型的列数据。以上目前正在工作，但我希望为其他列提供更多价值转换器，并且条件会变得笨拙。到目前为止，我对 Aurelia 的体验是它提供了相当优雅的解决方案，但我至今无法弄清楚这一点。

我尝试向 columnDefinition 类添加另一个属性，例如 formatter:string = undefined，然后尝试创建如下跨度：

<span if.bind="columnDefinition.formatter">${row[columnDefinition.propertyName] | columnDefinition.formatter}</span>
<span if.bind="!columnDefinition.formatter">${row[columnDefinition.propertyName]}</span>

但是解析器在 '.' 上抛出了一个错误。

有什么方法可以实现吗？处理此类问题的“aurelia 方式”是什么。

提前感谢您提供的任何帮助。

Answer 1

我最终采用了与@Slyvain 建议的方法类似的方法，但略有不同：

import {DateValueConverter} from './date';
import {NumberValueConverter} from './number';
import {autoinject} from 'aurelia-framework';

@autoinject()
export class MetaValueConverter {
    constructor(private date: DateValueConverter,
                private number: NumberValueConverter) {
    }

    public toView(value, valueConverter, format) {
        /* JUSTIFICATION: https://stackoverflow.com/questions/38898440/aurelia-dynamically-bound-value-converter#comment-65199423 */
        /* tslint:disable:no-string-literal */
        if (this[valueConverter] && this[valueConverter].toView) {
            return this[valueConverter].toView(value, format);
        } else {
            return value;
        }
    }

    public fromView(val, valueConverter, format) {
        if (this[valueConverter] && this[valueConverter].fromView) {
            return this[valueConverter].fromView(value, format);
        } else {
            return value;
        }
    }
}

原码可以在here找到。

希望这会有所帮助。

Answer 2

我跟着@peinearydevelopment又更进一步，创建了一个全动态的值转换器。

用法如下${myValue | dynamic:converterKey:converterArgs} 或简单${myValue | dynamic:converterKey} 如果不需要额外的参数。 converterKey 用于请求应在容器中注册的值转换器。 converterArgs 是您将传递给 toView 和 fromView 函数的参数数组。

import { autoinject, Container } from 'aurelia-dependency-injection';

export type ValueConverterKey = new (...args: any[]) => object;

type ValueConverterFunc = (...args: any[]) => any;

interface ValueConverter {
  toView?: ValueConverterFunc;
  fromView?: ValueConverterFunc;
}

@autoinject()
export class DynamicValueConverter {
    constructor(
      private container: Container,
    ) { }

    public toView(value: any, converterKey?: ValueConverterKey, ...converterArgs: any[]) {
      if (!converterKey) {
        return value;
      }

      return this.convertValueIfPossible(value, converterKey, converterArgs, 'toView');
    }

    public fromView(value: any, converterKey?: ValueConverterKey, ...converterArgs: any[]) {
      if (!converterKey) {
        return value;
      }

      return this.convertValueIfPossible(value, converterKey, converterArgs, 'fromView');
    }

    private convertValueIfPossible(value: any, converterKey: ValueConverterKey, converterArgs: any[], func: keyof ValueConverter) {
      let converter = this.container.get(converterKey);

      if (converter) {
        let converterFunc = converter[func];

        if (converterFunc) {
          return converterFunc.call(converter, value, ...converterArgs);
        }
      }

      return value;
    }
}

Answer 3

您是否考虑过将单个 <span> 与单个通用转换器一起使用，该转换器将列定义作为参数并委托给正确的转换器？我认为这会使组件标记更简单。

<span>${row[columnDefinition.propertyName] | formatCell:columnDefinition}</span>

在格式化程序内部：

export class FormatCell {
  toView(value, columnDefinition){
    if(columnDefinition.isCurrency)
        return new CurrencyConverter().toView(value);

    if(columnDefinition.isDate)
        return new DateConverter().toView(value);

    return value;
  }
}