创建双向值转换器

双向值转换器在你的 Value Converter 类中使用两种方法：toView 和 fromView 这些方法被恰当地命名以表示数据流向哪个方向。

在我们的示例中，我们将创建一个前置值转换器，它将确保在我们的应用程序中输入的金额在其前面有一个 $。

prepend.js

export class PrependValueConverter {
  
    /**
     * This is the value being sent back to the view
     *
     */
    toView(value) {
        return `$${value}`;
    }

    /**
     * Validate the user entered value
     * and round it to two decimal places
     *
     */
    fromView(value) {
        return parseFloat(value.toString().replace('$', '')).toFixed(2);
    }
}

使用它：

export class MyViewModel {
    amount = '';
}

<template>
    <require from="./prepend"></require>

    <h1>Current amount: ${amount}</h1>

    <label>Enter amount:</label>
    <input type="text" id="amount" value.bind="amount | prepend & debounce:500">
</template>

值得注意的是，我们正在使用绑定行为来限制我们的值更新的速率，或者每次键入时它都会更新，而不是预期的行为。