Форма ввода маски для более красивых данных

Question

У меня есть такая большая форма, которая является просто нативным веб-материалом с jQuery. В нем много полей, например 200, и мы периодически добавляем и удаляем поля. У меня есть запрос, чтобы все числа отображались с запятыми в качестве разделителя тысяч, а также чтобы даты всегда отображались в локализованном формате.

Как сейчас, теперь просто будет отображаться в необработанном формате: 10000000. Цель состоит в том, чтобы показать 10 000 000 во входных данных.

Я бы не хотел касаться серверного кода для обновления базы данных, поэтому сохраняйте всю логику клиента на JavaScript. Кроме того, пользователь должен вводить информацию в обычном режиме, но после завершения он может показывать любые числа с запятыми. toLocalizedString обычно работает для этого. Затем возникает проблема: при отправке формы мне нужно удалить все запятые с номеров.

Я начал перехватывать входные события, проверять, есть ли там число, и добавлять запятые. Затем при отправке мне потребуется процедура удаления запятых, но только если они были вставлены моей программой.

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

Я думал, что может быть какое-то элегантное решение этой проблемы.

Answer 1

Общий способ сделать это состоит в том, чтобы иметь модель с фактическими (типизированными) значениями, например, числом, и модель представления с отформатированными отображаемыми строками.

Например. (Псевдокод):

class Model {
    value: number
}

class ViewModel {
    value: string
}

class ViewModelMapper {
    toModelView(model: Model): ModelView {
    }
    toModel(modelView: ModelView): Model {
    }
}

Вам потребуется выполнить преобразования из модели в модель при загрузке данных с сервера и обратно перед сохранением на сервер. Вы будете использовать модель представления для отображения данных в пользовательском интерфейсе и модель для связи с бэкэндом.

Вы можете использовать существующие библиотеки масок ввода, которые уже что-то делают в этом направлении. Смотрите, например, что-то вроде jQuery-Mask-Plugin .

Вопрос немного общий, может быть, вы хотели бы добавить некоторые конкретные детали.