Тема: Snakeskin
Показать сообщение отдельно
  #564 (permalink)  
Старый 17.06.2015, 20:45
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Цитата:
Или меня уже глючит и все вставляемые элементы уже доступны мгновенно после innerHTML=tpl?
Конечно.

Цитата:
Мне пришлось гадать как подключить шаблоны в проект es6, оказалось я так понял никак, вернее также как и в es5, в <head><script snakeskin.js></head>
Для подключения скомпиленого шаблона можно использовать CommonJS, AMD и экспорт в глобал спейс.

https://github.com/SnakeskinTpl/Snak...world.ss.js#L6

Вот тут можно глянуть код после компиляции и увидеть логику.

Цитата:
Snakeskin.hash[tplName] - тут получаем доступ к шаблону
Да, так можно, только поправочка: Snakeskin.cache.

Цитата:
На этом месте я просто не понимаю, мозг не понимает без примера. Как подключать Snakeskin, что такое tpls в tpls.foo. tpls.foo это название шаблона?
Всё очень просто

{template foo()}
{/}


Тоже самое, что и

function foo() {
}


А

{template bar.foo()}
{/}


Тоже самое, что и

if (typeof bar === 'undefined') {
    var bar = {};
}

bar.foo = function foo() {
};


Неймспейс может называться как угодно и иметь любую вложенность, можно использовать точечную и скобочную нотацию: логика идентичная с JS.

{var fffuuu = 121}
{template car.bar['someStr' + fffuuu]foo()}
{/}


Можно ставить шаблоны, как методы JS класса

{template MyWidget.prototype.tpl()}
{/}


Цитата:
Как вообще не писать в глобал? Snakeskin.hash[tplName] - это разве не локал?
Использовать CommonJS или AMD. Логика такая: если есть exports, то шаблоны экспортируются туда, если есть функция define со свойством amd, то используется AMD, т.е. шаблон сам подстраивается под окружение.

Ещё можно просто обернуть полученный JS код функций и задать нужный this. Для таких задач удобно использовать конвеер сборки gulp/grunt с плагином wrap.

PS: отмечу, что в SS7 весь этот механизм значительно улучшен, например появилась поддержка runtime модулей и можно явно задать тип экспорта шаблонов.

{@= export 'es6'}
{import { getUserData } from './myLib.js'}

{template foo() @async}
   {forEach await getUserData() => @el}
       {@name} - {@age}
   {/}
{/}
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 17.06.2015 в 20:50.
Ответить с цитированием