Форум: Помогите исправить баг в небольшом javascript-шаблонизатореtempreites.js

Просмотр темы

PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery

Помогите исправить баг в небольшом javascript-шаблонизаторе - tempreites.js
Zaxap	#1 Опубликовано 21.07.2016 11:16
Элита Сообщений: 1090 Зарегистрирован: 05.09.2012 10:32	Здравствуйте. Искал удобные микро-шаблонизаторы на javascript, чтобы было все, что нужно, но ничего лишнего. Очень приглянулся Tempreites.js: ничего лишнего, но при этом есть все, что мне нужно (прямо все!). Все бы ничего, но в нем есть один неприятный баг. Приведу пример (один из примеров от автора). my_example.html GeSHi: HTML <script src="tempreites.js"></script> <div id="main"></div> <script> var tpr = '<ul id="theories">' +'<li>' +'<span class="author" data-show-if="author"></span>' +'<span>' +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>' +'</span>' +'</li>' +'</ul>'; document.getElementById('main').innerHTML += Tempreites.render(tpr, { austrianeconomics: 'd', title: 'Austrian economists and their theories', theories: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' }, { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' }, { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' } ] }); </script> Добавлено за 0.003 секунд, используя GeSHi 1.0.8.10 Результатом выполнения будет следующий html-код (без учета <div id="main"></div>): GeSHi: HTML <ul id="theories"> <li> <span class="author">Menger</span> <span> <a href="/subj" class="theory" data-bind-here="href" data-bind-there="url">Subjective value</a> </span> </li> <li> <span class="author">Hayek</span> <span> <a href="/abct" class="theory" data-bind-here="href" data-bind-there="url">Austrian Business Cycle Theory</a> </span> </li> <li> <span class="author">Kirzner</span> <span> <a href="/entre" class="theory" data-bind-here="href" data-bind-there="url">Sheer ignorance and entrepreneurship</a> </span> </li> </ul> Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10 Все работает! Отлично! А что если... просто взять и добавить какой-нибудь class или id, например, class="my-li-class" к li (в my_example.html)? Я был немного удивлен, когда увидел это: GeSHi: HTML `<ul id="theories"> <li class="my-li-class"></li> <li class="my-li-class"></li> <li class="my-li-class"></li> </ul> Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10` Что же произошло? Видимо, рендер "съел" все, что находилось внутри тегов с классом. То же самое случится, если добавить class="my-span-class" к span: GeSHi: HTML `<ul id="theories"> <li> <span class="author">Menger</span> <span class="my-span-class"></span> </li> <li> <span class="author">Hayek</span> <span class="my-span-class"></span> </li> <li> <span class="author">Kirzner</span> <span class="my-span-class"></span> </li> </ul> Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10` Все внутри этих тегов было съедено... Хотя, понаставь мы вокруг всего этого большое количество пустых div'ов, все будет работать - парадокс (не парадокс, а баг). Самое странное - то, что часть примеров автора работает вот так, опровергая результаты, приведенные в этих примерах. Сам же создатель сей замечательной штуки больше ее не поддерживает. А вот, собственно, и сам скрипт, немного оптимизированный (надеюсь ничего не испортил ненароком) мною. Но данный баг исправить так и не смог. tempreites.js Дорогие знатоки js, можете помочь с этим? Заранее спасибо! Зло не дремлет, а я добрый...


Deorchik	#2 Опубликовано 21.07.2016 12:09
Опытный пользователь Сообщений: 283 Зарегистрирован: 27.12.2012 10:30	Zaxap, Привет ! Бага никого там нету =))) все скажу как работает =)) Твой пример -- Код <script src="tempreites.js"></script> <div id="main"></div> <script> var tpr = '<ul id="theories">' +'<li>' +'<span class="author" data-show-if="author"></span>' +'<span>' +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>' +'</span>' +'</li>' +'</ul>'; document.getElementById('main').innerHTML += Tempreites.render(tpr, { austrianeconomics: 'd', title: 'Austrian economists and their theories', theories: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' }, { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' }, { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' } ] }); </script> Добавил класс love в li - и внутри все убралось, верно? да .... на выходе получил : Код `<div id="main"><ul id="theories"><li class="ssss"></li> <li class="love "></li> <li class="love "></li> </ul> </div>` Верно? =)) да теперь смотри как я делаю =)) добавлю класс love в li Код <div id="main"></div> <script> var tpr = '<ul id="theories">' +'<li class="love" data-show-if="love">' +'<span class="author" data-show-if="author"></span>' +'<span>' +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>' +'</span>' +'</li>' +'</ul>'; document.getElementById('main').innerHTML += Tempreites.render(tpr, { austrianeconomics: 'd', title: 'Austrian economists and their theories', theories: [ { love: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' } ] }, { love: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' } ] }, { love: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' } ] } ] }); </script> в итоге получаю Код <div id="main"><ul id="theories"><li class="love" data-show-if="love"><span class="author" data-show-if="author">Menger</span> <span><a href="/subj" class="theory" data-bind-here="href" data-bind-there="url">Subjective value</a> </span> </li> <li class="love" data-show-if="love"><span class="author" data-show-if="author">Menger</span> <span><a href="/subj" class="theory" data-bind-here="href" data-bind-there="url">Subjective value</a> </span> </li> <li class="love" data-show-if="love"><span class="author" data-show-if="author">Menger</span> <span><a href="/subj" class="theory" data-bind-here="href" data-bind-there="url">Subjective value</a> </span> </li> </ul> </div> все просто - классы указывать нужно и в конструкции запроса =))) надеюсь все понял =))
	Web

Zaxap	#3 Опубликовано 21.07.2016 12:31
Элита Сообщений: 1090 Зарегистрирован: 05.09.2012 10:32	Deorchik, да это как раз и баг, по-моему... Мне нравится, как данное сделано в Transparency, который, собственно, и вдохновил автора Tempreites написать свое творение. В этом плагине как раз все не сводится к повторению структурно передаваемыми данными "верстки". Это есть хорошо, ибо... зачем писать все по 2 раза? (мне поэтому и понравилась идея шаблонизатора: структура может быть в верстке, и нужно передать просто данные - потом меняй все в html, как хочешь, только class'ы или id оставляй, грубо говоря). В Transparency мои примеры прекрасно работают. Только вот в данном плагине много лишнего (вплоть до jquery), да и, по-моему, нет функции "compile", аналогичной Tempreites. Tempreites - облегченный Transparency, который к тому же работает, как по-мне, быстрее (миллисекундная оптимизация, угу)... Так что в tempreites.js это - баг... Как по-мне, это баг Если это - фича, то помогите мне ее исправить. Если все так, как вы говорите, Deorchik, то при том, как я записываю, внутри тех тегов не должно быть "пусто" - там должны быть просто строки без данных... А то, что они пропадают - это баг, не иначе)) Изменил(а) Zaxap, 21.07.2016 12:55 Зло не дремлет, а я добрый...


Deorchik	#4 Опубликовано 21.07.2016 15:18
Опытный пользователь Сообщений: 283 Зарегистрирован: 27.12.2012 10:30	Zaxap, не спорю - возможно это баг =))) дак к чему же тогда именно этот шаблонизатор ? если есть баги и разница в миллисекундах? думаю если его лечить - то тупо писать с нуля мне кажется он так построен - четкое следование по структуре ... Объединено 21.07.2016 16:09: https://habrahabr...st/219873/ Изменил(а) Deorchik, 21.07.2016 16:09
	Web

Zaxap	#5 Опубликовано 21.07.2016 16:36
Элита Сообщений: 1090 Зарегистрирован: 05.09.2012 10:32	Deorchik, читал эту статью:) Мне нравится именно Tempreites или Transparency (хотя второй и не удовлетворяет полностью мои потребности). Проблема в том, что я не знаю, как называются подобные шаблонизаторы и где их можно найти. Еще видел, Plates, но он тоже не подходит. --- --- --- --- --- --- --- --- --- --- --- --- Хм... взял 1 или 0.1 версию скрипта - все работает. Даже если задать класс к li или span, все ок. Остается понять, где именно баг в новой версии... tempreites.js, v0.1.0 GeSHi: HTML <script src="tempreites.js"></script> <div id="main"></div> <script> var tpr = '<ul id="theories">' +'<li class="my-li-class">' +'<span class="author" data-show-if="author"></span>' +'<span>' +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>' +'</span>' +'</li>' +'</ul>'; document.getElementById('main').innerHTML += Tempreites.render(tpr, { austrianeconomics: 'd', title: 'Austrian economists and their theories', theories: [ { author: 'Menger', theory: 'Subjective value', url: '/subj' }, { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' }, { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' } ] }); </script> Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10 В доказательство: https://jsfiddle..... Изменил(а) Zaxap, 23.07.2016 08:47 Зло не дремлет, а я добрый...

Поделиться этой темой
Социальные закладки:
URL:
BBcode:
HTML:

Перейти на форум:

Темы	Форум	Ответов / Просмотров	Последние сообщения
Помогите отключить часть кода в user_info_panel.php →	Вопросы новичков	5 / 7139	05.10.2020 15:16
Помогите создать условие →	Моды	5 / 4041	09.04.2019 20:15
Помогите растянуть шаблон →	Установка и настройка системы	4 / 2987	04.11.2018 17:26
Создание панели, помогите найти ошибку →	Вопросы новичков	1 / 3124	01.08.2018 03:10
RegExp и replace в JavaScript →	Javascript, ajax, jquery	2 / 15796	18.08.2016 10:14
Помогите написать запрос →	MySQL	3 / 7033	18.05.2016 16:46
PHP-Fusion v7.02.07 баг логи юзера →	Ошибки, баги	3 / 4893	14.04.2016 21:57
Captcha и отключенный JavaScript. →	Разное	8 / 26148	14.04.2016 21:53
Помогите составить запрос →	MySQL	5 / 4982	06.11.2015 08:40
Помогите установить плагин →	Вопросы новичков	3 / 3489	04.06.2015 06:55