17.06.2015, 14:22
|
 |
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Не нашёл в wiki, у snakeskin есть callback из скрипта, а ля Snakeskin(tpl, callback) или что-то типа Snakeskin.compile.then? Чтобы вызывался после активации DOM в шаблоне. callback в шаблоне не понял что делает.
Сейчас использую Snakeskin.hash[tplName] для рендеринга шаблона в DOM, так подключать нормально? в wiki тоже не нашёл описания про это.
Использую es6, про это тоже в вики немногословно.
Скомпиленные шаблоны подключены в header> menu.ss.js ... и т.д.
Если я что-то не нашёл, то просьба ткнуть носом или пояснить.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
17.06.2015, 18:19
|
 |
Быдлокодер;)
|
|
Регистрация: 19.11.2010
Сообщений: 4,338
|
|
Не совсем понял, что ты хочешь сделать. Ты имеешь ввиду, можно ли, чтобы результат шаблона отдавался по колбеку, а не сразу?
|
Цитата:
|
|
Сейчас использую Snakeskin.hash[tplName] для рендеринга шаблона в DOM, так подключать нормально? в wiki тоже не нашёл описания про это.
|
?
foo.ss
{template foo()}
Hello World!
{/}
index.js
console.log(foo()); // Hello World!
Если не хочется писать в глобалспейс, то просто добавляем шаблону неймспейс, например tpls.foo
|
Цитата:
|
|
Использую es6, про это тоже в вики немногословно.
|
А что именно нужно? В SS7 появится поддержка некоторых ES6 фич, но врятли ты про это.
{void foo(...args)}
Последний раз редактировалось kobezzza, 17.06.2015 в 18:34.
|
|
17.06.2015, 19:02
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Сообщение от kobezzza
|
|
Ты имеешь ввиду, можно ли, чтобы результат шаблона отдавался по колбеку, а не сразу?
|
Я написал обертку, с помощью которой я монтирую шаблон в DOM, а когда он вставлен и отображается в браузере делаю с ним разные действия, скрытие, показ и т.д. Типа onload на img.
Типа как тут:
insertTplIntoDOM('menu').then(function(){
//плавно скрываем первый элемент и уже точно известно, что элемент примонтирован и к нему есть доступ.
});
//где 'menu' это Snakeskin.hash['menu']
В принципе у меня обертка есть, я просто подумал, может есть из коробки. Или меня уже глючит и все вставляемые элементы уже доступны мгновенно после innerHTML=tpl?
|
Сообщение от kobezzza
|
|
А что именно нужно?
|
Мне пришлось гадать как подключить шаблоны в проект es6, оказалось я так понял никак, вернее также как и в es5, в <head><script snakeskin.js></head>
а в скрипте Snakeskin.hash[tplName] - тут получаем доступ к шаблону
|
Сообщение от kobezzza
|
|
не хочется писать в глобалспейс, то просто добавляем шаблону неймспейс, например tpls.foo
|
На этом месте я просто не понимаю, мозг не понимает без примера. Как подключать Snakeskin, что такое tpls в tpls.foo. tpls.foo это название шаблона?
{template tpls.foo()}
Hello World!
{/}
Как вообще не писать в глобал? Snakeskin.hash[tplName] - это разве не локал?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
17.06.2015, 20:45
|
|
Быдлокодер;)
|
|
Регистрация: 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, 17.06.2015 в 20:50.
|
|
17.06.2015, 21:54
|
 |
Профессор
|
|
Регистрация: 23.12.2013
Сообщений: 1,856
|
|
Сообщение от kobezzza
|
PS: отмечу, что в SS7 весь этот механизм значительно улучшен, например появилась поддержка runtime модулей и можно явно задать тип экспорта шаблонов.
{@= export 'es6'}
{import { getUserData } from './myLib.js'}
{template foo() @async}
{forEach await getUserData() => @el}
{@name} - {@age}
{/}
{/}
|
О, офигенно! |
|
20.06.2015, 11:50
|
|
Быдлокодер;)
|
|
Регистрация: 19.11.2010
Сообщений: 4,338
|
|
Одна из важнейших фич 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('}');
}
);
Как вам? |
|
20.06.2015, 22:41
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Сообщение от kobezzza
|
|
Как вам?
|
Побольше примеров и хорошая документация, в остальном я хз, что оно делает  .
Я пока из ss6 использую 40% и ума не приложу зачем мне больше, поэтому вряд ли буду полезен.
Для меня главное дока и предсказуемое поведение, в остальном пиши хоть "справа налево".
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
22.06.2015, 10:18
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Как вставить код скрипта, вместе с тегами script в шаблон, чтобы парсер не ругался?
cdata, data, ругается, мол ошибка. Почему?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
22.06.2015, 10:30
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Оо, нашёл. Честно говоря решётку не заметил, думал это коммент, автоматом воспринимаю в конфигах...
#{cdata}
А тогда такой вопрос, а зачем тут решётка? Был хитрый план по на будущее?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Последний раз редактировалось Gozar, 22.06.2015 в 10:33.
|
|
22.06.2015, 23:30
|
|
Быдлокодер;)
|
|
Регистрация: 19.11.2010
Сообщений: 4,338
|
|
|
Цитата:
|
|
Как вставить код скрипта, вместе с тегами script в шаблон, чтобы парсер не ругался?
|
Для этой задачи в SS существует расширенный синтаксис: https://github.com/kobezzza/Snakeski...%D0%B8%D 1%81
Логика простая: когда ты начинаешь юзать #{...} для декларации директивы, то все вложенные директивы также будут требовать такую декларацию, например:
{template foo()}
#{script}
var a = {
bar: #{1 + 2}
};
#{/}
{/}
Эта директива для inline вставок, например,
{template foo()}
<input type="button" onclick="{data console.log({foo: 1})}">
{/}
|
Цитата:
|
|
А тогда такой вопрос, а зачем тут решётка? Был хитрый план по на будущее?
|
CDATA работает до построения AST, чисто вырезается по регулярке и поэтому я сделал обязательным расширенный синтаксис директивы для использования, чтобы случайно не выстрелить себе в ногу.
|
Цитата:
|
|
Оо, нашёл. Честно говоря решётку не заметил, думал это коммент, автоматом воспринимаю в конфигах...
|
В SS комменты обозначаются через
/// Однострочный коммент
/* Многострочный коммент */
/** 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>
Забавно, что я сделал коммент как /// чтобы не напарываться на такие ошибки с //, но не учёл, что урлы с тремя слешами тоже бывают 
Последний раз редактировалось kobezzza, 22.06.2015 в 23:55.
|
|
|
|
