ВходНаше всё Теги codebook 无线电组件 Поиск Опросы Закон Четверг
14 ноября
995776 Топик полностью
Связанные сообщения
Web Application
Веб-нотификации: Я думаю это интересная тема, и её нужно вынести в отдельный топик. Я так же прошу кого-то кто разбирается...2020-09-18
Я уже высказывал своё мнение о уеб-дизайнерах и используемых ими "фреймворках". Оно крайне негативное. Практически веб-технологи...2020-05-22
А зачем тебе вообще нужен асинхронный запрос? Потому, что как часто бывают с ардуинщиками -- они услышали что-то одно, зацепилис...2020-04-16
Вообще lloyd наталкивает на интересные мысли. Условный макропроцессор можно сделать комбинировав пункты 1 и 2. Т.е. мы пишем шаб...2020-04-16
Ну это как спор между ЯВУ с динамической типизацией и статической. Первые быстро стартуют, но не далеко летают, с ростом сложнос...2020-04-16
Не нужно устраивать PHP и мешать вермишель из перекрученных между собой стилей, javascript-кода и логической организации (HTML)....2020-04-16
Идеология "умного дома". -> На мой достаточно консервативный взгляд, ничем, кроме как любовью к творчеству это обосновать нел...2014-11-14
fk0, легенда (16.04.2020 12:50, просмотров: 898) ответил Гyдвин на Прошу подсказки у тех, кто сечет в теме: Создаю HTML таблицу из полученного XML в функции JS. Как в этом же цикле задать фоновый цвет строки таблицы? Необходимо подкрасить фон строки таблицы в зависимости от содержимого одного из полей строки. После создания таблицы могу конечно провернуть еще один цикл для смены фона, но хотелось бы вставить HTML тег для фона прямо в этом цикле. С утра бьюсь - нихрена не выходит..
Зачем тебе XML? Данные в javascript проще переносить в виде JSON. В который можно трансформировать на хосте чем-то вроде xsltproc. Делать это руками на javascript несколько неудобно. И если всё-таки приходится, то опять же идея отдельно написать функцию трансформации в JSON и отдельно функцию шаблонизации, заполняющую предоставленный шаблон HTML-таблицы данными из JSON -- не самая глупая идея. 

Хотя конечно данные из таблицы в таблицу, если структура совпадает, можно переносить изоморфно, путем итерации по XML-таблицы, как у тебя сделано. И копирования данных опять же в шаблон HTML-таблицы, только полей присутствующих в шаблоне: например, в XML 10 разных колонок, а в HTML нужно только 5, соответственно в HTML-шаблоне присутствует только строка заголовка и одна строка шаблона, которая размножается по числу строк в XML-таблице. И потом заполняется только колонки присутствующие в HTML, остальные пропускаются. Т.е. итерация по строкам XML во внешнем цикле и по колонкам HTML во внутреннем, с вытаскиванием нужных колонок по атрибутам, XPath-запросу или индексу.


Самая большая проблема у тебя --- ты зачем-то руками генерируешь HTML. Эту функция в Javascript нужна для специальных целей, а не обычных приложений. Нормальный путь: трансформировать какой-либо имеющийся шаблон заполнив его данными. Ну ты ж когда GUI-приложение на PC делаешь, не генерируешь же в рантайме весь UI? Ты его заранее, может быть даже визуально в специальной программе, проектируешь. Так же и HTML шаблон можно. Потом когда программа запускается -- у тебя сразу на старте создаются все окна из готовых шаблонов. Создавать в динамике есть необходимость только те окна, которые не являются синглтонами, что на самом деле редкость, и опять же часто это проще делать дуплицированием шаблона, а не конструированием в динамике. И эти окна или шаблоны в HTML могут сразу быть, но быть не отображаемые, и делаться видимыми когда нужно. Принцип в GUI и web -- один и тот же. И в HTML по сути практически ничего динамического быть не должно, должно меняться только свойство display отдельных элементов. Разумеется не напрямую, а через присвоение стилей, по сути весь внешний вид должен быть исключительно управляемый стилями (см. ниже).


Единственное что в такой системе делается в динамике: это заполнение данных (текста) в поля шаблона и вынужденное дуплицирование строк или колонок в шаблонах таблиц, или строк в списках. В идеале тут должен быть некий готовый шаблонизатор, но к сожалению я не знаю таких. Те что есть -- работают как ты, через ()(). Но я не веб-дизайнер, я нормальный программист, и точка зрения у меня отличается от вебдизайнерской (у которых хуяк-хуяк и в продакшн). К большому счастью сделать самодельный почти что универсальный шаблонизатор не так уж и сложно: не обязательно писать отдельный код для каждой таблицы или код для всех возможных полей ввода/вывода присутствующих на экране -- это всё, в принципе, может делаться одной функцией. Но иногда конечно вылезают острые углы и приходится сглаживать говнокодом.


В случае таблиц или списков проще сделать шаблонную строку и колонку невидимой путем отметки специальным стилем и после дуплицирования стиль менять на другой, означающий, что это дуплицированная строка которую в будущем, перед наполнением новыми данными, нужно удалить. Для остальных полей ввода-вывода всё относительно просто: они все сажаются в формы (чтоб не морочиться с querySelector) и доступны по имени в глобальном неймспейсе. Да, шаблоны, разумеется, тоже сидят в формах. И пишется функция, которая "изоморфно-рекурсивно" умеет переносить содержимое JSON в формы. Ну т.е. если в JSON есть запись с именем "value", то её содержимое попадает в элемент указанной формы с таким именем. В зависимости от типа элемента присвоение производится к value (input), к innerText (object), массивы объектов присваиваются таблицам с тем же именем (рекурсивно) и происходит дуплицирование строк...


Касательно твоего вопроса: всё связанное с визуальным оформлением следует делать исключительно через стили. Даже если ты свойства из javascript руками меняешь, правильней будет менять стиль и отдельно написать правило для раскраски данного стиля. Так архитектура ПО в целом остаётся консистентной, а не превращается в вермишель. И в твоём случае может быть специальная функция, которая бегает по указанным таблицам и в зависимости от содержимого ячейки дописывает дополнительные стили (element.classList += "red"). Функция вызывается после присвоения ячейкам новых значений. И в CSS пишешь уже что такое "red" в твоём понимании, например: .red { background-color: lightgreen; }...

[ZX]