Number и date formatting

Backbone.js не предоставляет встроенных средств для форматирования чисел и дат, так как основной фокус фреймворка направлен на организацию структуры приложений: модели, коллекции, представления и маршрутизация. Тем не менее, в реальных приложениях форматирование чисел и дат является критически важным для отображения данных в удобочитаемом виде. Для решения этой задачи Backbone тесно интегрируется с внешними библиотеками и собственными методами моделей и представлений.

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

Форматирование чисел обычно требуется для отображения валют, процентов или больших чисел с разделителями. Backbone-модель может предоставлять методы для представления данных в нужном формате:

var Product = Backbone.Model.extend({
    defaults: {
        price: 0,
        quantity: 0
    },

    formattedPrice: function() {
        return this.get('price').toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
    },

    formattedQuantity: function() {
        return this.get('quantity').toLocaleString();
    }
});

var product = new Product({ price: 123456.78, quantity: 1500 });
console.log(product.formattedPrice());  // "123 456,78 ₽"
console.log(product.formattedQuantity());  // "1 500"

Ключевые моменты:

  • Использование toLocaleString() позволяет локализовать формат числа без сторонних библиотек.
  • Параметры style и currency обеспечивают корректное отображение денежных единиц.
  • Методы форматирования удобно помещать в модели, чтобы представления могли просто вызывать готовые строки.

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

var Product = Backbone.Model.extend({
    formattedPrice: function() {
        return numeral(this.get('price')).format('0,0.00 $');
    }
});

Форматирование дат

Backbone-модели часто содержат временные метки или объекты Date. Для отображения дат в удобном формате также рекомендуется использовать методы модели или специализированные библиотеки (например, Moment.js или встроенные возможности Intl.DateTimeFormat).

var Event = Backbone.Model.extend({
    defaults: {
        date: new Date()
    },

    formattedDate: function() {
        return this.get('date').toLocaleDateString('ru-RU', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    },

    formattedTime: function() {
        return this.get('date').toLocaleTimeString('ru-RU', {
            hour: '2-digit',
            minute: '2-digit'
        });
    }
});

var event = new Event({ date: new Date('2025-12-29T15:30:00') });
console.log(event.formattedDate()); // "понедельник, 29 декабря 2025 г."
console.log(event.formattedTime()); // "15:30"

Ключевые моменты:

  • toLocaleDateString и toLocaleTimeString позволяют локализовать формат даты и времени под конкретную культуру.
  • Форматирование может включать день недели, месяц и год, а также часы и минуты.
  • Для стандартного ISO-формата или вычислений лучше хранить данные в UTC и форматировать их только при выводе.

Интеграция с представлениями

Представления Backbone используют методы модели для получения уже отформатированных данных. Это позволяет отделить логику отображения от логики хранения данных:

var ProductView = Backbone.View.extend({
    render: function() {
        this.$el.html(
            '<p>Цена: ' + this.model.formattedPrice() + '</p>' +
            '<p>Количество: ' + this.model.formattedQuantity() + '</p>'
        );
        return this;
    }
});

var productView = new ProductView({ model: product });
$('body').append(productView.render().el);

Преимущества такого подхода:

  • Централизация логики форматирования в модели.
  • Простота изменения формата без модификации представления.
  • Поддержка локализации и различных форматов отображения.

Использование сторонних библиотек

Для крупных приложений часто применяется комбинация Backbone.js с библиотеками форматирования чисел и дат:

  • Moment.js / Day.js — удобное форматирование, парсинг и вычисления дат.
  • Numeral.js — гибкое форматирование чисел, валют и процентов.
  • Intl API — современный стандарт JavaScript для локализации чисел и дат без сторонних библиотек.

Пример с Day.js:

var Event = Backbone.Model.extend({
    formattedDate: function() {
        return dayjs(this.get('date')).format('DD MMMM YYYY, dddd');
    }
});

Практические рекомендации

  1. Форматировать данные только для отображения — внутренние модели должны хранить данные в исходном формате.
  2. Использовать методы модели — это обеспечивает единое место для изменений формата.
  3. Локализация — всегда учитывать региональные настройки при отображении чисел и дат.
  4. Интеграция с библиотеками — Backbone не ограничивает использование сторонних решений, что делает приложения гибкими и масштабируемыми.

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

Оглавление