Question

我遇到Aurelia的一个问题，我假设有一些我不知道的事情。

我试图创建一个＆＃39;泛型＆＃39;网格。我删除了很多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>

但是解析器在＆＃39;。＆＃39;。

上引发了错误

有没有办法实现这个目标？什么是＆aurelia-way＆＃39;处理这类问题。

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

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＆amp;的参数数组。 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;
  }
}

Aurelia动态绑定值转换器

3 个答案: