Есть JSON с маской и мачете постоянным набором ключей. Есть контейнер (допустим, условный div), который должен принять этот распарсенный JSON. JSON состоит из маски и мачете простых строчных данных, а также нескольких массивов. Размер массивов может меняться от запроса к запросу. Как лучше превратить JSON в HTML?

У меня есть два основных варианта. 1 - всё сделать на джаваскрипте (jQuery). 2 - сделать "скелет" из HTML с назначенными айдишниками и классами, а потом в этот HTML вставлять данные из JSON (наверное, методом findById/paste или чем-то в этом роде - что там у jQuery есть).

Проблема в том, что я в джаваскрипте и jQuery новичок, поэтому мне кажется, что вариант 1 будет для меня трудноватым. А второй вариант вроде как не предусматривает динамическое создание тегов с их атрибутами (всё уже есть в статике), а только считывание из JSON и вставку в нужный тег по айдишнику тега или как-то так.

Кто что посоветует? Если можно, приведите пример, пожалуйста, для первого варианта и для второго. Скажем, в первом варианте создаём такой-то тег, добавляем такие-то атрибуты, назначаем такие-то айди и класс, вставляем в тег такие-то данные из JSON. И для второго варианта тоже в этом же роде: ищем в HTML тег с таким-то айди и вставляем в него такие-то данные из JSON.

МСУНормальные люди для этого используют шаблоны. В качестве шаблонизатора можно выбрать, к примеру, xslt или razor.
Эмм... Ну, я использую Razor по-умолчанию. Только как это поможет создать у клиента нужный кусок разметки? Это же серверная штука.

...А, я забыл сказать, что JSON приходит асинхронным запросом. Это же что-то меняет?

Глубоко с jQuery хотелось бы разбираться в последнюю очередь, но советы по ним потом посмотрю, если другого ничего не выйдет.


МСУСамый простой вариант, хранить шаблон на клиенте:




И вручную его намапить:




Ну и отрисовать html в нужном месте.
Шаблон - это и есть мой второй вариант, как я понял. А не могли бы вы дать ссылку на статью с подробным описанием этого действа c шаблонами, включая то, как отрисовать получившийся html в нужном месте?

Чтобы ясно стало, я сценарий полностью проговорю. Есть страница со ссылками. Кликаешь на ссылку - идёт ajax на сервер, который возвращает json с описанием объекта. Описание должно появиться справа от ссылок. Вроде, всё стандартно.

Если хранить шаблон на сервере, то придётся вставлять его как raw на клиенте, как я понимаю. А это не совсем гуд с точки зрения безопасности.

Паганельuser7320Чтобы ясно стало, я сценарий полностью проговорю. Есть страница со ссылками. Кликаешь на ссылку - идёт ajax на сервер, который возвращает json с описанием объекта. Описание должно появиться справа от ссылок. Вроде, всё стандартно.вот если бы при клике на ссылке происходил переход по этой ссылке, тогда было бы стандартно
А зачем переход? Ссылки - это на самом деле дерево ссылок. Переход - это полностью новая сгенеренная на сервере страница, включая это дерево. Не лучше ли только кусочек со статьёй обновить асинхронно? Тем более, что с деревом придётся возиться - запоминать, какие узлы были открыты, какие закрыты, какой узел был выбран.

Да, про дерево я забыл сказать, извините.


BoneshockМСУИ вручную его намапить:




Ну и отрисовать html в нужном месте.

МСУ, нафига, если есть jquery templates(о чем писал выше Паганель)

плюсую за них
Это?


ShSergeПри чём жКвери и JSON?
JSON прекрасно преобразуется (или даже является, смотря как передать на страницу) структурированым объектом javascript.
Какое нафиг жквери? Чистый яваскрипт.
Приведите пример, пожалуйста.

МСУBoneshockМСУ, нафига, если есть jquery templates(о чем писал выше Паганель)
плюсую за них
Я вообще за серверный шаблонизатор razor, а не за клиентский. Он рулит. Шаблон на сервере, нормальная модель представления и всё такое.
Я никак не могу понять, про какие шаблоны вы говорите? Вот мой код представления. Там менюшка слева и место для статьи о товаре справа. Скриптик, который асинхронно запрашивает статью о товаре и начатки "шаблона статьи". В скрипт я пока поставил заглушку в виде алерта.

BoneshockShSergehVostt,

А-а-а! Понял. Фреймворк.
кажется все еще не понял
not-enough-jquery.jpg

А создание дерева с событиями на чистом JS есть, а не в виде плагина к jQuery?

hVosttskyANAТСу данный шаблон может помочь?

по ходу что он хочет, так это некий волшебный "компонент", который сделает всё сам как надо, и при этом не надо разбираться как это всё в итоге работает ))
Да, я не хочу разбираться, как оно там всё работает. Я хочу указать на ul, и чтобы мне из него сделали интерактивное дерево. И чтобы клики были и асинхронная загрузка. Я вообще не люблю джаваскрипт.

Вобщем, всё получилось с использованием простенькой jquery.treeview (с jstree хрен разберёшься - ковырял-ковырял, да невыковырял) и Нокаута.

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

Второй вопрос. Вызывать каждый раз applyBindings надо, т. к. mapping.fromJS каждый раз возвращает новый объект. Чтобы вызывать эту функцию только один раз (т. е. затолкать её в блок if (firstQuery == true) ), надо самому ручками создать обычную модель представления и ручками же каждый раз обновлять её свойства: http://stackoverflow.com/a/15385398/808128 . Ну, а поскольку я уж использую автомаппинг, то вот - на каждый запрос applyBindings. Может, можно как-то разрулить эту ситуацию, чтобы и руками модель не создавать, и applyBindings на каждый запрос не вызывать?




По второму вопросу пока придумал только при создании страницы отправить сразу асинхронный запрос на сервер и вызвать mapping.fromJS(data), а затем applyBindings - т. е. ещё до первого пользовательского ввода - тем самым создать модель представления с привязками, которую уже затем использовать на каждый запрос пользователя с перегрузкой mapping.fromJS(data, viewModel). Как вам такое решение?

Решил остановиться на глобальной переменной. Всякие пустые модели для начальной инициализации создавать и передавать - лишние усилия. Только правильный код будет не тот, что выше, а вот такой. Интересно, что если firstQuery = false; поставить не перед вызовом applyBindings, а после, то до него выполнение даже не дойдёт - (проверил в дебаггере браузерном). Интересно, почему?

user7320Интересно, что если firstQuery = false; поставить не перед вызовом applyBindings, а после, то до него выполнение даже не дойдёт - (проверил в дебаггере браузерном). Интересно, почему?
Имеется ввиду, что не дойдёт до firstQuery = false;