Не нашёл в wiki, у snakeskin есть callback из скрипта, а ля Snakeskin(tpl, callback) или что-то типа Snakeskin.compile.then? Чтобы вызывался после активации DOM в шаблоне. callback в шаблоне не понял что делает.
Сейчас использую Snakeskin.hash[tplName] для рендеринга шаблона в DOM, так подключать нормально? в wiki тоже не нашёл описания про это. Использую es6, про это тоже в вики немногословно. Скомпиленные шаблоны подключены в header> menu.ss.js ... и т.д. Если я что-то не нашёл, то просьба ткнуть носом или пояснить. |
Не совсем понял, что ты хочешь сделать. Ты имеешь ввиду, можно ли, чтобы результат шаблона отдавался по колбеку, а не сразу?
Цитата:
foo.ss
{template foo()}
Hello World!
{/}
index.js console.log(foo()); // Hello World! Если не хочется писать в глобалспейс, то просто добавляем шаблону неймспейс, например tpls.foo Цитата:
{void foo(...args)}
|
Цитата:
Типа как тут:
insertTplIntoDOM('menu').then(function(){
//плавно скрываем первый элемент и уже точно известно, что элемент примонтирован и к нему есть доступ.
});
//где 'menu' это Snakeskin.hash['menu']
В принципе у меня обертка есть, я просто подумал, может есть из коробки. Или меня уже глючит и все вставляемые элементы уже доступны мгновенно после innerHTML=tpl? Цитата:
а в скрипте Snakeskin.hash[tplName] - тут получаем доступ к шаблону Цитата:
{template tpls.foo()}
Hello World!
{/}
Как вообще не писать в глобал? Snakeskin.hash[tplName] - это разве не локал? |
Цитата:
Цитата:
https://github.com/SnakeskinTpl/Snak...world.ss.js#L6 Вот тут можно глянуть код после компиляции и увидеть логику. Цитата:
Цитата:
{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()}
{/}
Цитата:
Ещё можно просто обернуть полученный JS код функций и задать нужный this. Для таких задач удобно использовать конвеер сборки gulp/grunt с плагином wrap. PS: отмечу, что в SS7 весь этот механизм значительно улучшен, например появилась поддержка runtime модулей и можно явно задать тип экспорта шаблонов.
{@= export 'es6'}
{import { getUserData } from './myLib.js'}
{template foo() @async}
{forEach await getUserData() => @el}
{@name} - {@age}
{/}
{/}
|
Цитата:
|
Одна из важнейших фич SS7 будет открытость API парсера, т.е. сам пользователь сможет расширять язык своими директивами и поэтому я потратил кучу времени на рефакторинг существующего API и в итоге получился на мой взгляд очень простой, но в тоже время мощный интерфейс, вот например директивы switch-case-default на новом API:
import { Snakeskin } from '../core';
Snakeskin.addDirective(
'switch',
{
block: true,
notEmpty: true,
inside: Snakeskin.group('case')
},
function (command) {
this.append($=> `switch (${this.out(command, {sys: true})}) {`);
},
function () {
this.append('}');
}
);
Snakeskin.addDirective(
'case',
{
block: true,
notEmpty: true,
group: 'case',
replacers: {
'>': 'case ',
'/>': 'end case'
}
},
function (command) {
this.append($=> `case ${this.out(command, {sys: true})}: {`);
},
function () {
this.append('} break;');
}
);
Snakeskin.addDirective(
'default',
{
block: true,
group: 'case'
},
function () {
this.append('default: {');
},
function () {
this.append('}');
}
);
Как вам? |
Цитата:
Я пока из ss6 использую 40% и ума не приложу зачем мне больше, поэтому вряд ли буду полезен. Для меня главное дока и предсказуемое поведение, в остальном пиши хоть "справа налево". |
Как вставить код скрипта, вместе с тегами script в шаблон, чтобы парсер не ругался?
cdata, data, ругается, мол ошибка. Почему? |
Оо, нашёл. Честно говоря решётку не заметил, думал это коммент, автоматом воспринимаю в конфигах...
#{cdata} А тогда такой вопрос, а зачем тут решётка? Был хитрый план по на будущее? :) |
Цитата:
Логика простая: когда ты начинаешь юзать #{...} для декларации директивы, то все вложенные директивы также будут требовать такую декларацию, например:
{template foo()}
#{script}
var a = {
bar: #{1 + 2}
};
#{/}
{/}
Цитата:
{template foo()}
<input type="button" onclick="{data console.log({foo: 1})}">
{/}
Цитата:
Цитата:
/// Однострочный коммент /* Многострочный коммент */ /** JSDoc (не вырезается парсером из конечного кода) */ Для создания XML комментариев есть удобная директива comment, которая также поддерживает условия для старых ИЕ.
{template foo()}
{comment IE 7}
{link}http://bar.com/ie.css{/link}
{/}
{/}
Но также можно просто писать по старинке :) PS: По поводу однострочных комментов: есть сильное желание заменить в SS7 на //# (или ещё как), т.к. сейчас можно напороться на ошибку при подключение некоторых урлов: <a href="file:///C://foo.png">121</a> Т.е. нужно явно экранировать: <a href="file://\/C://foo.png">121</a> Забавно, что я сделал коммент как /// чтобы не напарываться на такие ошибки с //, но не учёл, что урлы с тремя слешами тоже бывают :( |
| Часовой пояс GMT +3, время: 15:57. |