Jump to content
  • 0

Аналог Emmet для JS


antonKar
 Share

Question

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

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());
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
  On 6/16/2015 at 2:41 PM, nerv said:
зачем ты в код разметку лепишь? 

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

 

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

Link to comment
Share on other sites

  • 0
  On 6/16/2015 at 2:50 PM, antonKar said:
Как это сделать правильно?

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

[].forEach.bind(document.querySelectorAll("input[type='file']", function($file){  var $hidden = document.createElement("input");  $hidden.type = "hidden";  $file.parentNode.insertBefore(childGuest, $hidden.nextSibling);});
Edited by afdw
Link to comment
Share on other sites

  • 0
  On 6/16/2015 at 2:59 PM, afdw said:
document.createElement

 

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

Edited by antonKar
Link to comment
Share on other sites

  • 0
  On 6/16/2015 at 2:50 PM, antonKar said:
Ок, какие есть методики для вставки в DOM вёрстки, которой изначально нет?

MV** паттерны 

 

  On 6/16/2015 at 2:50 PM, antonKar said:
Например (синтетический пример) мы добавили через input[type=file] 50 файлов и надо вставить в форму 50 input[type=hidden] с value, значение которого равно имени файла. Как это сделать правильно?

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

 

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

Link to comment
Share on other sites

  • 0

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


  On 6/16/2015 at 3:02 PM, antonKar said:

 

  On 6/16/2015 at 2:59 PM, afdw said:
document.createElement

 

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

 

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

Link to comment
Share on other sites

  • 0
  On 6/16/2015 at 3:03 PM, nerv said:
я реализовал в виде модуля для ангуляра

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

Link to comment
Share on other sites

  • 0
  On 6/16/2015 at 3:07 PM, antonKar said:
Vue.js можно настроить на тот момент, что у нас уже есть шаблонизатор, который будет конфликтовать?

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

 

  On 6/16/2015 at 3:07 PM, antonKar said:
А если у нас Smarty в качестве серверного шаблонизатора?

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

 

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

Link to comment
Share on other sites

  • 0
  On 6/18/2015 at 2:25 PM, antonKar said:
Хорошо, а какие?

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

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

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

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

5. ...

  • Like 1
Link to comment
Share on other sites

  • 0
  On 6/19/2015 at 2:52 PM, nerv said:
2. изменить в конфиге vue.js символы разделители

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy