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-way'是什麼？

在此先感謝您提供的任何幫助。

Answer 1

你有沒有使用單個<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; 
    } 
} 

Answer 2

我最終採取了類似的做法，以一個由@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 3

我跟着@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; 
    } 
}