Забыли пароль?
Запросите новый здесь.

Автор темы: Zaxap
ID темы: 2727
Информация:
Тема содержит 5 сообщения, была просмотрена 35832 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery
 Распечатать тему
Помогите исправить баг в небольшом javascript-шаблонизаторе - tempreites.js
Zaxap
Здравствуйте. Искал удобные микро-шаблонизаторы на javascript, чтобы было все, что нужно, но ничего лишнего. Очень приглянулся Tempreites.js: ничего лишнего, но при этом есть все, что мне нужно (прямо все!).
Все бы ничего, но в нем есть один неприятный баг. Приведу пример (один из примеров от автора).

my_example.html
Загрузить источник  GeSHi: HTML
  1. <script src="tempreites.js"></script>
  2. <div id="main"></div>
  3. var tpr = '<ul id="theories">'
  4. +'<li>'
  5. +'<span class="author" data-show-if="author"></span>'
  6. +'<span>'
  7. +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>'
  8. +'</span>'
  9. +'</li>'
  10. +'</ul>';
  11. document.getElementById('main').innerHTML += Tempreites.render(tpr, {
  12. austrianeconomics: 'd',
  13. title: 'Austrian economists and their theories',
  14. theories: [
  15. { author: 'Menger', theory: 'Subjective value', url: '/subj' },
  16. { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },
  17. { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' }
  18. ]
  19. });
Добавлено за 0.005 секунд, используя GeSHi 1.0.8.10


Результатом выполнения будет следующий html-код (без учета <div id="main"></div>):
Загрузить источник  GeSHi: HTML
  1. <ul id="theories">
  2. <li>
  3. <span class="author">Menger</span>
  4. <span>
  5. <a href="/subj" class="theory" data-bind-here="href" data-bind-there="url">Subjective value</a>
  6. </span>
  7. </li>
  8. <li>
  9. <span class="author">Hayek</span>
  10. <span>
  11. <a href="/abct" class="theory" data-bind-here="href" data-bind-there="url">Austrian Business Cycle Theory</a>
  12. </span>
  13. </li>
  14. <li>
  15. <span class="author">Kirzner</span>
  16. <span>
  17. <a href="/entre" class="theory" data-bind-here="href" data-bind-there="url">Sheer ignorance and entrepreneurship</a>
  18. </span>
  19. </li>
  20. </ul>
Добавлено за 0.007 секунд, используя GeSHi 1.0.8.10


Все работает! Отлично! А что если... просто взять и добавить какой-нибудь class или id, например, class="my-li-class" к li (в my_example.html)?
Я был немного удивлен, когда увидел это:
Загрузить источник  GeSHi: HTML
  1. <ul id="theories">
  2. <li class="my-li-class"></li>
  3. <li class="my-li-class"></li>
  4. <li class="my-li-class"></li>
  5. </ul>
Добавлено за 0.003 секунд, используя GeSHi 1.0.8.10


Что же произошло? Видимо, рендер "съел" все, что находилось внутри тегов с классом. То же самое случится, если добавить class="my-span-class" к span:
Загрузить источник  GeSHi: HTML
  1. <ul id="theories">
  2. <li>
  3. <span class="author">Menger</span>
  4. <span class="my-span-class"></span>
  5. </li>
  6. <li>
  7. <span class="author">Hayek</span>
  8. <span class="my-span-class"></span>
  9. </li>
  10. <li>
  11. <span class="author">Kirzner</span>
  12. <span class="my-span-class"></span>
  13. </li>
  14. </ul>
Добавлено за 0.005 секунд, используя GeSHi 1.0.8.10

Все внутри этих тегов было съедено... Хотя, понаставь мы вокруг всего этого большое количество пустых div'ов, все будет работать - парадокс (не парадокс, а баг).

Самое странное - то, что часть примеров автора работает вот так, опровергая результаты, приведенные в этих примерах. Сам же создатель сей замечательной штуки больше ее не поддерживает.


А вот, собственно, и сам скрипт, немного оптимизированный (надеюсь ничего не испортил ненароком) мною. Но данный баг исправить так и не смог.
tempreites.js


Дорогие знатоки js, можете помочь с этим? Заранее спасибо!


Зло не дремлет, а я добрый...
 
Deorchik
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
Deorchik, да это как раз и баг, по-моему...
Мне нравится, как данное сделано в Transparency, который, собственно, и вдохновил автора Tempreites написать свое творение.
В этом плагине как раз все не сводится к повторению структурно передаваемыми данными "верстки". Это есть хорошо, ибо... зачем писать все по 2 раза? (мне поэтому и понравилась идея шаблонизатора: структура может быть в верстке, и нужно передать просто данные - потом меняй все в html, как хочешь, только class'ы или id оставляй, грубо говоря).
В Transparency мои примеры прекрасно работают. Только вот в данном плагине много лишнего (вплоть до jquery), да и, по-моему, нет функции "compile", аналогичной Tempreites.


Tempreites - облегченный Transparency, который к тому же работает, как по-мне, быстрее (миллисекундная оптимизация, угу)...
Так что в tempreites.js это - баг... Как по-мне, это багab
Если это - фича, то помогите мне ее исправить.

Если все так, как вы говорите, Deorchik, то при том, как я записываю, внутри тех тегов не должно быть "пусто" - там должны быть просто строки без данных... А то, что они пропадают - это баг, не иначе))


Изменил(а) Zaxap, 21.07.2016 12:55
Зло не дремлет, а я добрый...
 
Deorchik
Zaxap, не спорю - возможно это баг =))) дак к чему же тогда именно этот шаблонизатор ? если есть баги и разница в миллисекундах?

думаю если его лечить - то тупо писать с нуля мне кажется он так построен - четкое следование по структуре ...

Объединено 21.07.2016 16:09:
https://habrahabr...st/219873/


Изменил(а) Deorchik, 21.07.2016 16:09
 
Web
Zaxap
Deorchik, читал эту статью:)
Мне нравится именно Tempreites или Transparency (хотя второй и не удовлетворяет полностью мои потребности).
Проблема в том, что я не знаю, как называются подобные шаблонизаторы и где их можно найти.
Еще видел, Plates, но он тоже не подходит.


--- --- --- --- --- --- --- --- --- --- --- ---


Хм... взял 1 или 0.1 версию скрипта - все работает. Даже если задать класс к li или span, все ок. Остается понять, где именно баг в новой версии...

tempreites.js, v0.1.0


Загрузить источник  GeSHi: HTML
  1. <script src="tempreites.js"></script>
  2. <div id="main"></div>
  3. var tpr = '<ul id="theories">'
  4. +'<li class="my-li-class">'
  5. +'<span class="author" data-show-if="author"></span>'
  6. +'<span>'
  7. +'<a class="theory" data-bind-here="href" data-bind-there="url"></a>'
  8. +'</span>'
  9. +'</li>'
  10. +'</ul>';
  11. document.getElementById('main').innerHTML += Tempreites.render(tpr, {
  12. austrianeconomics: 'd',
  13. title: 'Austrian economists and their theories',
  14. theories: [
  15. { author: 'Menger', theory: 'Subjective value', url: '/subj' },
  16. { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },
  17. { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' }
  18. ]
  19. });
Добавлено за 0.005 секунд, используя GeSHi 1.0.8.10


В доказательство: https://jsfiddle.....


Изменил(а) Zaxap, 23.07.2016 08:47
Зло не дремлет, а я добрый...
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,179)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)