建立雙向值轉換器

雙向值轉換器在你的 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>

值得注意的是，我們正在使用繫結行為來限制我們的值更新的速率，或者每次鍵入時它都會更新，而不是預期的行為。