posthtml-expressions icon indicating copy to clipboard operation
posthtml-expressions copied to clipboard

[feat]: with template

Open Shyam-Chen opened this issue 8 years ago • 1 comments

<each loop="item in [['/', 'Home'], ['/about', 'About'], ['/contact', 'Contact']]">
  <a class="mdl-navigation__link" href="{{ item[0] }}">{{ item[1] }}</a>
</each>

use template

import template from 'foo.html';

document.querySelector('#ex').innerHTML = template({
  List: [['/', 'Home'], ['/about', 'About'], ['/contact', 'Contact']]
});
<each loop="item in ${ _.List }">
  <a class="mdl-navigation__link" href="{{ item[0] }}">{{ item[1] }}</a>
</each>

Output:

<each loop="item in /, Home, /about, About, /contact, Contact">
  <a class="mdl-navigation__link" href="{{ item[0] }}">{{ item[1] }}</a>
</each>

Shyam-Chen avatar Mar 31 '17 03:03 Shyam-Chen

Posthtml's templating method will not generate client-side templates with posthtml-expressions, it is only compatible with interpolated strings like <p>Hello ${planet}</p>.

Currently the only way to get client-side templates with plugins is to have the code generator output a function, which is only possible at the moment using the reshape version. Although hopefully this functionality will also be coming to posthtml soon!

jescalan avatar Mar 31 '17 03:03 jescalan

duplicate of #54

Shyam-Chen avatar Apr 25 '24 09:04 Shyam-Chen