связать объект javascript с DOM

Я пытаюсь создать объект javascript, который отслеживает состояние формы. Мой первый удар был длинным «процедурным» решением jquery, где я прокручивал каждое поле формы, проверяю, установлено ли оно «Все», удалите класс active или добавьте его, если его там нет. Это короткая версия:связать объект javascript с DOM

function activeClass() { 
    if(this.val() === 'All') { 
    $(this).parent().removeClass('active'); 
    } 
    $('#content-filter select', context).foreach(function() { 
    if(this.val() !== 'All') { 
     this.addClass('active'); 
    } 
    }); 
}

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

formState = { 
    featured: false, 
    all: false, 
    category: 'All', 
    topics: 'All', 
    audience: 'All', 
    date: {value: '', min: '', max: '', filter_op: '='}, 
    };

Часть, с которой я борюсь, связана с тем, как связать объект с DOM. Мой первый наклон, чтобы сделать что-то вроде этого:

$('select').on('change', function() { 
    formState[$(this).attr('id')] = $(this).val(); 
    });

Проблема здесь состоит в том, что id из выбора должен соответствовать свойству. Кроме того, мне сказали, что способ сделать это - использовать метод getter и/или setter для изменения этих значений. У меня есть некоторое понимание того, что это значит, но где я смущен, так это то, как они привязаны к DOM.

источник

2016-05-27 icicleking

Зачем использовать отдельный объект для отслеживания состояния, когда вы можете просто получить состояние из элемента DOM? – Barmar

Если вы хотите сохранить дополнительную информацию об элементе, вы можете использовать метод '.data()' jQuery для связывания произвольных данных с элементом DOM. – Barmar

Рекомендация по спасению жизни: изучите фреймворк, который помогает с привязкой данных, в противном случае ваш код будет расти много и будет слишком сложно поддерживать. I will leave here some suggestions.

Теперь, используя JQuery, чтобы сделать это ... у вас есть 2 основные большие возможности: обновление формы модели на каждом изменении (по аналогии с тем, что у вас есть) или просто собрать все данные поля на форме в действии (например: нажатие кнопки отправки).

Option1: обновить модель все время!

У вас должна быть хорошая ссылка (id) на каждое свойство в форме, чтобы вы могли создавать слушателей, которые вам нужны, чтобы обновлять вашу модель формы по мере необходимости. Подобно тому, что вы сделали:

$('#'+fieldId).on('change', function() { 
    var myNewValue = $('#'+fieldId).getValue(); 
    updateMyFormModel(fieldId, newValue); 
});

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

Ваша кнопка отправки формы должна иметь что-то вроде

onclick="retrieveMyFormModel()"

, где вы просто получить свой обновленный вид непрерывно модели и отправить его на сервер.

Option2: Соберите все данные в конце

не делать ничего, пока не очень закончится, пока пользователь нажмет на кнопку отправки. Пройдите по всем полям, создайте свою модель и отправьте ее.

источник

2016-05-27 16:53:28

связать объект javascript с DOM

ответ

Смежные вопросы