jQuery Data Link не обрабатывает списки выбора

Question

У меня есть простая форма адреса, использующая потрясающий новый плагин Data Link. Это простой сценарий создания / редактирования, который выполняет ajax-вызов для заполнения формы, если присутствует идентификатор, или пустой формы, если нет.

dataComplete : function(data){
        $self.step1Data = data;
        $self.Templates.step1('#step1form', $self.step1Data);
        $('#step1form').link($self.step1Data);
    }

Вышеупомянутая функция вызывается в любом случае, чтобы связать форму с объектом step1Data (я просто передаю ему пустой объект JavaScript, если у меня нет ничего для заполнения формы). Объект 'Templates', который вы видите выше, представляет собой простую оболочку, которая использует также замечательный плагин jQuery Templates.

Это прекрасно работает при редактировании; .link() идеально соответствует форме, и все в порядке. Проблема возникает при работе с пустой формой: все поля, кроме списка выбора состояний, связаны между собой. Вот HTML-код для списка выбора:

<select class="state" id="State" name="State">
    <option value="UT">Utah</option>
</select>

Соглашения об именах классов и идентификаторов идентичны другим частям формы, но Data Link, похоже, не замечает этого сама по себе. Я мог бы, вероятно, настроить его так, чтобы он делал это вручную, но для чистоты я предпочел бы не делать этого, если мне это сойдет с рук. Любые идеи, почему он не связывает список выбора?

Answer 1

Ладно, разобрался. Согласно этой очень подробной статье Шалька, при привязке пустой формы к объекту с помощью Data Link документация подразумевает не совсем точное поведение.

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

Такое поведение подходит для большинства элементов управления (и по возможным причинам производительности имеет смысл ожидать ввода данных пользователем). Проблема в том, что текущая документация подразумевает иное. Имея это в виду, я просто вызвал событие изменения для списков выбора в форме после вызова.link() следующим образом:

    dataComplete : function(data){
        $self.step1Data = data;
        $self.Templates.step1('#step1form', $self.step1Data);
        $('#step1form').link($self.step1Data);

        //trigger the select lists
        $('[name=State]').trigger('change');
        $('[name=Type]').trigger('change');
    }

Вы также можете просто перебирать поля ввода в форме и запускать все их события изменения, если это необходимо. Ниже приведен один из способов, я уверен, что есть лучшие методы (здесь обход DOM - форма -> ul -> li -> входы).

    $('.stepForm').children().children('input').trigger('change')