PopulateJS: don't repeat yourself в HTML-разметке

[@kivsiak]

Я правильно понял что отличие между populate и populate-inner в том что в первом случае элемент расклонируется внутри родительской ноды, а во втором будут склонированы потомки элемента?

[@Vlad911]

Во втором (populate-inner) скопируется всё содержимое элемента и сам элемент заполнится этим склонированным содержимым вот так: <a class="populate-inner-2">example</a> превратиться в <a class="populated">exampleexample</a>

[@swanrnd]

Насколько понимаю, это для IE 9 и выше. Более того возможны проблемы с индексацией.

[@Vlad911]

Какие проблемы с индексацией? Это тул нужен только в процессе разработки.

[@nick4fake]

— это для IE 9 и выше
И что? Давайте уже забудем об IE8

[@spmbt]

Вычищать шаблон от лишних классов всё равно придётся. Тут лучше бы иметь чисто внешний инструмент, работающий над шаблоном и могущий не только размножать внутренности, а генерировать случайный контент. Описать такой генератор удобно в JSON (не очень) или списком «jQuery-запрос — операция над контентом».

К примеру, у вас

generate('...путь LI', {repeat: 7}); // повторит указанный блок 7 раз

а

generate('...путь LI', [{repeat: 7}, {random:'"thumb","thumb,flower,cat"'}]);
//рандомизирует thumb.jpg на thumb.jpg, flower.jpg и cat.jpg.

[@Vlad911]

Вам бы понравилось, если бы кроме CSS-сахара было бы еще JS API решающее вашу задачу? Если да, то feature request принят :) Ждите и воздастся!

[@Anisotropic]

А как чисто внешний инструмент узнает, какие блоки и сколько раз нужно скопировать? Это ему ещё как-то отдельно указать нжно будет.
А тут я так понимаю вся фишка в том, что верстаешь шаблон как обычно, а в браузере видишь склонированные элементы, никаких лишних телодвижений не нужно.

Спасибо автору, при первой же вёрстке попробую этот инструмент.

[@spmbt]

Так я же всё показал в примере:

generate('...путь LI', {repeat: 7}); // повторит указанный блок 7 раз

путь указывает, какой элемент DOM выбрать и что с ним делать — клонировать, рандомизировать и т.п.. Внешний — в смысле написанный снаружи HTML, которого он обрабатывает.

Vlad911: про CSS-сахар не понял, где он? Вы добавляете скрипт и классы. Классы — это лишнее в тексте. Я предлагаю выбирать элементы внешними селекторами (первый аргумент в generate() ). Тогда обходимся только скриптом с его API и списком команд для генерации. Даже контентом < div class=«title populate-inner-3»>Lorem ipsum dolor...< /div> не засоряем шаблон.

[@hell0w0rd]

Мне кажется лучше было-бы сделать мини-шаблонизатор и утилиту очистки от этих шаблонов:

{$5}
<li>{$2}...{$}</li>
{$}

Например как-то так

[@Vlad911]

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

[@ha2bj]

Напишите плагин к Grunt

[@mank_dev]

Подобное уже есть =) называется assemble. Генерит статические страницы используя в основе handlebars.js. Мы на работе потихоньку внедряем – удобно!

[@mggtsnppr]

Так и задумано, что в опросе все варианты можно выбрать одновременно? По теме — определенно быстрее, однако разное поведение клонируемого блока все равно надо моделировать через копирование. Я имею ввиду тестирование верстки на неадекватные данные.
P.S.: ну и чистить все равно придется в нескольких местах…

[@Vlad911]

В чём смысл чистить в нескольких местах? Почему бы не просто удалить подключение скрипта populatejs и жить спокойно?

[@mggtsnppr]

Это, возможно, субъективное мнение, но я не люблю лишних вещей в коде, которые никак в итоге не используются.

[@Vlad911]

В вашем любимом HTML-редакторе есть замена с помощью регэкспов. Сделать замену 'populate-(\d+)' на '' не проблема же.

[@Dmitry_f]

Интересная идея. Её можно было-бы развить — сразу евалить django-like шаблоны, заполняя фейковыми данными. Это бы избавило от лишнего шага в разработке — верстки, позволив сверстанный темплейт сразу подключать на настоящие данные. Помимо этого, каждый раз можно было-бы видеть живые данные, вместо статического lorem ipsum.
Я как-то начал, но не закончил.