Блог

Главная - Вопросы по программированию - Как добавить поля формы, подобные django, в базовое приложение?

Как добавить поля формы, подобные django, в базовое приложение?

#javascript #backbone.js

#javascript #backbone.js

Вопрос:

Я разрабатываю одностраничное приложение в backbone.js для сбора пользовательского ввода используется множество html-форм. Чтобы сэкономить время на кодирование, я хотел бы иметь модель / коллекцию полей формы, аналогичную полям формы Django

Мои требования:

  • декларативная спецификация элементов формы и их поведения (например, требуемое значение true / false, события, …)
  • представления / шаблоны по умолчанию для всех полей формы (но переопределяемые с помощью конфигурации)
  • все поля, принадлежащие форме, должны храниться в одной магистрали.Коллекция для упрощения поиска полей
  • проверка всей формы или отдельных элементов

Вот как может выглядеть моя простая реализация поля формы:

  FormField = Backbone.Model.extend({
    initialize: function (attributes, options){
        //TODO: initialize form field according to type,
        // i.e. set up correct view, validation etc.
    }
    defaults: {
        type: "TextField",
        label: "Unknown Label",
        required: false,
    }
});
FormFields = Backbone.Collection.extend({model: FormField})

MyPlugin = new PluginModel({
    //TODO: render a form with these config options within the edit view of the PluginModel
    config: FormFields([
        {type: "TextField", id:"store_name", label: "Name of Store", required: true},
        {type: "SelectField", id:"store_type", label: "Type of Store", required: true, choices: ['local','http']},
    ]),
    //runs after user "submits" form
    run: function (){
        if this.config.isValid(){

        }
    }
});

Однако я столкнулся со следующими проблемами:

  • Backbone.Collection В A могут размещаться только модели того же типа. Каков наилучший способ хранения разных полей формы в одной коллекции? (Мой подход заключается в использовании только одного FormField класса, все дифференцирование происходит на основе типа formfield в методе initialize (), но мне это кажется немного запутанным)
  • Как я могу настроить правильное представление для каждого экземпляра FormField?

Ответ №1:

На самом деле не найдено использования model для определения элементов пользовательского интерфейса…

Оставьте свою модель чистой. Только данные, которые входят в ваше приложение и выходят из него через ваш сервер. Ваша проверка выполняется в вашей модели (метод проверки см. в документации backbone). Ваша модель содержит все поля, которые будут отображаться в вашем представлении.

Теперь вам нужна информация об этих полях (то, что вы называете formFields). Им не обязательно быть базовой моделью, и их не нужно вставлять в базовую коллекцию. Достаточно простого объекта javascript и массива. Добавляйте эту информацию в свою модель по мере ее расширения (массив описаний полей).

Создайте экземпляр вашего общего вида формы из вашей модели и создайте форму, используя описания полей. Прослушайте события изменения входных данных, выделений, текстовых полей и обновите свою модель. Если обнаруживается ошибка проверки, в модели будет запущено событие «ошибка», и вы сможете отреагировать на свое представление (показать ошибку).

Комментарии:

1. Не поймите меня неправильно… Я просто хотел следовать принципу DRY в своей модели FormField. Создание / проверка / сериализация формы — это сквозная задача в моем приложении … многим различным моделям нужна эта функциональность, поэтому я подумал, что это лучший способ ее реализовать. О коллекции formfield: Мне нужен способ удобного доступа к сериализованным значениям полей формы в моей модели, например, form.get('field_id').get('value') и базовая коллекция казалась идеальной для этого.

2. То же самое относится и к объекту javascript: form.field_name.value … Если вам не нужно создавать события из базовой коллекции и модели, это излишне.

Ответ №2:

Я портировал библиотеку форм Django на JavaScript как newforms — на данный момент это довольно прямой порт, который может создавать поля формы как элементы DOM или HTML, но пока не выполняет никакой привязки к DOM или событиям.

Я не знаком с Backbone.js но если это облегчает задачу, мне было бы интересно услышать о том, как это делается. Я бы предпочел предоставить полезные помощники, которые позволяют людям настраивать привязку по своему усмотрению, а не навязывать определенный шаблон использования и изобретать кучу колес в процессе.

Ответ №3:

Вы можете попробовать с backbone-forms.js https://github.com/powmedia/backbone-forms