Задать вопрос
@rinatr
javascript

Возможен dom в json формате?

Добрый день!
Интересуюсь следующим вопросом:
Есть какая-либо библиотека, позволяющая превращать такой код:
{
            html: [{
                        'body':
                        {
                            id: 'test',
                            OnLoad: function()
                            {
                                alert(1);
                            },
                            content: 
                            [{
                              'div':
                              {
                                  id: 'test2', 
                                  content: [
                                      {
                                          'input':
                                          {
                                             type: 'text',
                                              name: 'test',
                                              value: '222'
                                          }
                                        'input':
                                          {
                                             type: 'text',
                                              name: 'test2',
                                              value: '222'
                                          } 
                                      }
                                  ]
                              }
                            }]
                        }
                    }]


В: 

<html>
<body id = "test">
  <div id ="test2">
     <input type = "text" name = "test" value = "222" />
    <input type = "text" name = "test" value = "222" />
 </div>
</body>
</html>
<script>
  
</script>


Такой подход написания мне очень понравился в разных библиотеках (ext.js, webix, qooxdoo и пр.), хотелось немного модифицировать одну ui библиотечку чтобы тоже так писать, но она строго цепляется к дом элементам.

Здорово погуглив - я ничего кроме как bemjson не нашел.
Но она мне кажется создана немного для других целей. Можеть что-то еще есть, более простое? И если ничего нет, насколько БЕМ подойдет для такого дела? Мне например нужно, чтобы все (OnLoad, click и пр. эвенты и методы генерировались не в html по такому же принципу а хранились в отдельном файле а каким то образом связывались по id-шнику с родительским элементом).
  • Вопрос задан
  • 1020 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
@ilyarsoftware
Да это возможно, например BEMJSON:
{
  tag : 'div',
  attrs : {
    id : 'anchor1',
    name : 'BEM',
  },
  content : [
    {
      tag : 'div',
      attrs : {
        id : 'anchor2',
        name : 'BEM 2',
      },
      content : 'BEM text'
    },
  ]
}

После прогона через стандартные шаблоны BEMHTML получим (живой пример):
<div id="anchor1" name="BEM">
    <div id="anchor2" name="BEM 2">BEM text</div>
</div>


Еще может быть для вашей задаче подойдет BEMTREE. При помощи BEMTREE описывается шаблон обработки JSON-данных, который преобразует данные в BEMJSON и далее через BEMHTML получаем HTML. Пример:

Есть данные:

{
  "content": "BEM Block!",
  "title": "I am BEM"
}


Описываем трансформацию данных в BEMJSON на технологии BEMTREE:

block( 'someBlock' )(
  def()( function () {
    var data = this.ctx.data || {};
    this.ctx.content = [
      { elem : 'title', content : data.title || 'Empty title' },
      { elem : 'content', content : data.content || 'Empty content' },
    ];
    return applyNext();
  } )
);


После применения на данных мы получим BEMJSON, останется только применить BEMHTML. Это и есть двухпроходная шаблонизация.

Тут jsfiddle.net/ilyar/5dw8Q и тут https://goo.gl/GRGSFf — живой пример применения BEMTREE в браузере (можно и на сервере применяя те же шаблоны).
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
sim3x
@sim3x
Отсутствие таких библиотек должно тебя навести на мысль, что оно того не стоит
Ответ написан
Комментировать
Комментировать
@Kostik_1993
Web Developer
BEMJSON
Ответ написан
2 комментария
2 комментария
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Можно модифицировать код nano, т.к. он почти такого же формата и сделать как необходимо.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы