Блог

Я наследую проект, который включает в себя раздел кода, подобный этому:

     {% for device in test.devices.devices %}
        <tr id="{{ outer_loop.index }}.{{ loop.index }}.device-row">
            <th scope="col">{{ loop.index }}</th>
            <td>
                <select class="device-platform-name-selector" name="{{ outer_loop.index }}.{{ loop.index }}.platform_name">
                {% for current_platform_name_option in test.device_platform_name_options %}
                    <option
                            value="{{ current_platform_name_option }}"
                            {% if current_platform_name_option == device.platform_name %} selected {% endif %}>
                        {{ current_platform_name_option }}
                    </option>
                {% endfor %}
                </select>
            </td>
  

за которым следует ряд полей ввода.

Моя задача — преобразовать это в серию выпадающих диалоговых окон, которые реагируют на ранее установленные поля (на основе словаря из таблицы базы данных, переданного в render_template). Мне нужно назначать эти <option> поля как (а) при первом заполнении страницы, так и (б) каждый раз, когда какой-либо из выпадающих списков изменяет свой выбор. (Мне также нужно обработать добавление новой записи, но этот код уже присутствует и должен быть простым, как только я выясню следующие вопросы.)

Я новичок в Javascript и Flask, поэтому некоторые из моих вопросов могут быть идиотскими, и я приношу извинения:

1. Является ли размещение onLoad() события javascript в каждом из последующих <select> полей правильным методом для первоначального заполнения <option> полей для этих <select> полей? Или я должен заполнить данные этого списка опций обратно в python и передать их через параметры шаблона? (Инициализация осложняется тем фактом, что количество элементов в устройстве loop и количество элементов в outer_loop могут различаться. Кроме того, предварительно установленные значения, поступающие из flask, должны влиять на первоначально выбранные <option> во всех выпадающих списках.)
2. Было бы лучше всего создавать переменные, которые представляют выборки, сделанные на странице (ala model-view-ish), или это нормально ссылаться на выборки элементов HTML как на истинный источник информации для такого рода операций?
3. Если лучше всего использовать переменные, могу ли я повторно использовать переменные, переданные через Jinja / templates в реальном времени, или мне нужно повторно создать все такие переменные var myfoo = JSON.parse('{{ foo | tojson | safe }}'); . аля. (PS: я не спрашиваю, будут ли изменения в foo распространяться обратно на сервер, просто могу ли я изменить foo локально.)
4. Если нормально использовать элементы HTML в качестве «модели», то как я могу в рамках события onLoad() или onChange () перейти от обрабатываемого this объекта, чтобы вернуться к значениям из «главного» родительского и родственных объектов, которые определяют, какими будут текущие параметры? Могу ли я проанализировать текущий объект, name чтобы определить соответствующие части outer_loop.index и loop.index , а затем получить доступ к другим элементам по имени? Или я должен «подняться» по дереву HTML / DOM?

Спасибо, что уделили мне время!

Я хотел продолжить свой пост

1. Оказывается, что добавление onLoad() к любому из соответствующих тегов, которые я рассматривал, не сработает, поскольку onLoad() поддерживается только для тега body, тега IMG или тега SCRIPT. Есть несколько способов обойти это, например, вставляя некоторые теги скрипта в места, где они могли бы отсутствовать естественным образом, но это казалось уродливым сбивчивым решением. В конце концов я решил заполнить поля ВЫБОРА в python с помощью шаблонов для их начального состояния и передать данные ПАРАМЕТРОВ через render_template().
2. Изучив другие вопросы StackOverflow, я решил, что доступ к значениям элементов DOM, подобным этому document.getElementById(foo).value; , был обычной практикой; и что создание повторяющихся переменных и попытка отслеживать изменение их значений были чрезмерно сложными. Вероятно, существуют фреймворки, которые сделали бы это естественным и легким, но я не хотел наращивать какие-либо новые фреймворки.
3. Я почти уверен, что {{ variable }} переменные стиля Jinja доступны только для чтения. Я не смог найти ни одного примера людей, пытающихся использовать их иначе, но несколько примеров людей, загружающих их в локальные переменные в своем javascript.
4. Ответ на это был «оба». Переход к родственным и родительским объектам был довольно простым. У меня уже были циклы шаблонов для начальной загрузки страницы, которые присваивали уникальные идентификаторы каждому элементу, поэтому было легко получить индексы элементов, что-то вроде var newIndex = element.id.split(".")[1] затем перестроить имена и найти соответствующий элемент, подобный document.getElementById("sibling_thing." newIndex) . Но я также использовал то, что я назвал выше «обходом DOM», например: element.parentElement.parentElement.parentElement.querySelectorAll(foo) . Кажется, что оба стиля являются обычной практикой, и программист должен использовать правильный инструмент для работы.