Форматирование дат, чисел и валют

Knockout.js предоставляет мощные средства для привязки данных и их динамического обновления в пользовательском интерфейсе. Среди важных аспектов работы с данными — корректное форматирование дат, чисел и валют, что позволяет отображать информацию в удобочитаемом виде и соответствовать локальным стандартам.

Преобразование данных с помощью вычисляемых наблюдаемых (computed observables)

Для форматирования данных часто используются вычисляемые наблюдаемые (ko.computed). Они позволяют создавать производные значения на основе существующих наблюдаемых и автоматически обновляться при изменении исходных данных.

Пример форматирования даты:

function ViewModel() {
    this.currentDate = ko.observable(new Date());

    this.formattedDate = ko.computed(function() {
        var date = this.currentDate();
        var day = date.getDate().toString().padStart(2, '0');
        var month = (date.getMonth() + 1).toString().padStart(2, '0');
        var year = date.getFullYear();
        return `${day}.${month}.${year}`;
    }, this);
}

ko.applyBindings(new ViewModel());

В этом примере используется метод padStart для корректного отображения чисел с ведущими нулями. Вычисляемое свойство formattedDate автоматически обновляется при изменении currentDate.

Форматирование чисел

Для чисел важны два аспекта: количество десятичных знаков и разделение разрядов. Knockout.js не предоставляет встроенных фильтров для чисел, но легко интегрируется с JavaScript-функциями форматирования.

Пример:

function ViewModel() {
    this.price = ko.observable(1234567.89);

    this.formattedPrice = ko.computed(function() {
        return this.price().toLocaleString('ru-RU', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }, this);
}

ko.applyBindings(new ViewModel());

Метод toLocaleString обеспечивает локализованное отображение числа с нужным количеством десятичных знаков и разделением разрядов пробелами или запятыми в зависимости от локали.

Форматирование валюты

Для валют важно не только количество знаков после запятой, но и символ валюты и правильное позиционирование. toLocaleString поддерживает параметр style: 'currency'.

Пример форматирования в рублях:

function ViewModel() {
    this.amount = ko.observable(15999.5);

    this.formattedAmount = ko.computed(function() {
        return this.amount().toLocaleString('ru-RU', {
            style: 'currency',
            currency: 'RUB'
        });
    }, this);
}

ko.applyBindings(new ViewModel());

В результате вывод будет выглядеть как 15 999,50 ₽, при этом формат автоматически соответствует локали 'ru-RU'.

Пользовательские привязки (custom bindings)

Knockout.js позволяет создавать собственные привязки, что особенно полезно для единообразного форматирования данных по всему приложению.

Пример пользовательской привязки для валют:

ko.bindingHandlers.currency = {
    update: function(element, valueAccessor, allBindings) {
        var value = ko.unwrap(valueAccessor());
        var formatted = value.toLocaleString('ru-RU', {
            style: 'currency',
            currency: 'RUB'
        });
        element.textContent = formatted;
    }
};

Использование в HTML:

<span data-bind="currency: amount"></span>

Такой подход позволяет централизованно управлять форматированием, упрощает поддержку кода и обеспечивает единый стиль отображения чисел и валют.

Масштабирование и динамическое обновление

Все методы Knockout.js автоматически поддерживают реактивность. Изменение исходного значения наблюдаемого (observable) автоматически обновляет все связанные вычисляемые свойства и пользовательские привязки. Это позволяет динамически изменять даты, числа и суммы валют, не выполняя дополнительных операций по обновлению интерфейса.

Пример динамического обновления:

setInterval(function() {
    viewModel.currentDate(new Date());
    viewModel.amount(Math.random() * 10000);
}, 1000);

Каждую секунду formattedDate и formattedAmount обновляются автоматически, обеспечивая корректное отображение новых значений.

Итоговые рекомендации по форматированию

  • Использовать вычисляемые наблюдаемые для преобразования данных перед отображением.
  • Применять стандартные методы JavaScript (toLocaleString, padStart) для локализованного форматирования.
  • Создавать пользовательские привязки для повторяющихся шаблонов форматирования чисел и валют.
  • Всегда учитывать локаль и требования к отображению даты, чисел и валют для конкретного региона.

Фокус на реактивности и единообразии позволяет строить интерфейсы с корректно отформатированными данными, которые автоматически обновляются при изменении исходных наблюдаемых.

Оглавление