Аналог Emmet для JS

[antonKar]

Допустим есть строка вида

var html = "<div class='gallery-item _active' data-id='5'><img src='/upload/temp/blablabla.jpg' alt='' /></div>";

Есть ли в JS что-то для упрощения строки, приведённой выше? То есть написать что-то типа

var html = "div.gallery-item._active[data-id='5']>img[src='/upload/temp/blablabla.jpg']";

А затем уже при вставке HTML делать что-то типа

$gallery.html(html.emmet());

[afdw]

Есть HTML препроцессоры на JS. Надо выбрать, какой нравится, и привязать.

[antonKar]

Есть HTML препроцессоры на JS

Спасибо, с первого захода нашёл вот это http://absurdjs.com/pages/html-preprocessing/, посмотрю вечерком

[nerv]

Есть ли в JS что-то для упрощения строки, приведённой выше?

Нескромный вопрос: а зачем ты в код разметку лепишь? 

[Yazon_Nile]

Чтобы потом вынести в шаблоны?)

[antonKar]

зачем ты в код разметку лепишь? 

Ок, какие есть методики для вставки в DOM вёрстки, которой изначально нет?

 

Например (синтетический пример) мы добавили через input[type=file] 50 файлов и надо вставить в форму 50 input[type=hidden] с value, значение которого равно имени файла. Как это сделать правильно?

[afdw]

Как это сделать правильно?

Примерно так:

[].forEach.bind(document.querySelectorAll("input[type='file']", function($file){  var $hidden = document.createElement("input");  $hidden.type = "hidden";  $file.parentNode.insertBefore(childGuest, $hidden.nextSibling);});

Edited June 16, 2015 by afdw

[antonKar]

document.createElement

 

Через цикл дёргать 50 раз DOM? Как-то не очень красиво и эффективно. Гораздо проще и менее затратно будет через цикл сформировать html-структуру в виде строки и затем уже 1 раз дёрнуть DOM для вставки.

Edited June 16, 2015 by antonKar

[nerv]

Ок, какие есть методики для вставки в DOM вёрстки, которой изначально нет?

MV** паттерны 

 

Например (синтетический пример) мы добавили через input[type=file] 50 файлов и надо вставить в форму 50 input[type=hidden] с value, значение которого равно имени файла. Как это сделать правильно?

твой и множество других синтетических примеров загрузки файлов (к сожалению, не все) я реализовал в виде модуля для ангуляра

 

но, именно тебе посоветую Vue.js (потому, что она проще, удобней, быстрей)

[afdw]

Зачем так всё усложнять для простейшей задачи?

 

document.createElement

 

Через цикл дёргать 50 раз DOM? Как-то не очень красиво и эффективно. Гораздо проще и менее затратно будет через цикл сформировать html-структуру в виде строки и затем уже 1 раз дёрнуть DOM для вставки.

 

http://javascript.ru/optimize/documentfragment-0

[antonKar]

я реализовал в виде модуля для ангуляра

А если у нас Smarty в качестве серверного шаблонизатора? Vue.js можно настроить на тот момент, что у нас уже есть шаблонизатор, который будет конфликтовать? А то выглядит ИМХО как из пушки по воробьям.

[nerv]

Vue.js можно настроить на тот момент, что у нас уже есть шаблонизатор, который будет конфликтовать?

на основании чего ты сделал вывод "будет конфликтовать"? Умозаключение из серии "хорошая погода. Курс доллара должен вырасти"

 

А если у нас Smarty в качестве серверного шаблонизатора?

не поверишь, у нас тоже смарти

 

ничего не буду объяснять. Нет времени. Не интересно. Лениво.

[antonKar]

на основании чего ты сделал вывод "будет конфликтовать"?

 

Да {{действительно}}, {с чего бы это}.

[nerv]

Да {{действительно}}, {с чего бы это}.

<style>    .в-самом-деле {        /* code */    }</style>

А жуквери со смарти не конфликтует? 

[antonKar]

Ну, голубчик, каждый раз {content} оборачивать в literal ИМХО не очень корректно.

[nerv]

Ну, голубчик, каждый раз {content} оборачивать в literal ИМХО не очень корректно

вероятно, поэтому есть минимум три способа избежать этого

[antonKar]

Хорошо, а какие? Или хотя бы как мне запрос в гугл составить?

[Николя223]

http://nbubna.github.io/HTML/

https://github.com/zodoz/jquery-ZenCoding

[nerv]

Хорошо, а какие?

1. изменить в конфиге smatry символы разделители

2. изменить в конфиге vue.js символы разделители

3. использовать {ldelim}{rdelim} в smatry

4. не использовать '{' & '}' при описании шаблона (да, это возможно)

5. ...

[antonKar]

2. изменить в конфиге vue.js символы разделители

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

[nerv]

Спасибо, что всё-таки потрудились объяснить, хоть, как вы ранее сказали, было это и сложно

под сложным я подразумевал другое)