Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Snakeskin (https://javascript.ru/forum/project/35057-snakeskin.html)

Gozar 07.02.2015 10:39

В общем буду постить в этот коммент. Удалось таки запустить наследование...
html.ss
{template html(@param)}
    {doctype}
    <html lang="ru">
        <head>
            {block head}

                {block meta}
                        <meta charset="UTF-8">
                        <title>{param.title}</title>
                        <meta name="keywords" content="{param.meta_kwd}">
                        <meta name="description" content="{param.meta_des}">
                {/}

                {block style}
                {/}

                {block script}
                {/}

            {/block}
        </head>

        <body>
            {block body}
            {/block}
        </body>
    </html>
{/template}


main.ss
{include 'html.ss'}

{template main(param) extends html}

    {block style}
        {super}
        {link css}/css/style.css{/}
    {/}

    {block script}
        {super}
        {script js src = /js/lib/react.js}{/}
        {script js src = /js/lib/shim.js}{/}
    {/}

    {block body}
        {super}
        <div class="wrap">{param.title}</div>
    {/}

{/template}


вызов:
var tpl = require('../tpl/main.ss.js').init(require('snakeskin'));
var html = tpl.main({title:'Заголовок', meta_kwd:'ключевые, слова', meta_des: 'Много Текста Описания'});



Как можно заметить в main мы не вызываем напрямую {block head}: {block head}{super}{/} Он сам вызовется. В main мы просто дополняем блоки нужными нам данными. Причем место значения не имеет, можно хоть сначала написать {block body}, а в конце {block style}. Выводиться будет в порядке обозначенном в html.ss.

Gozar 07.02.2015 11:02

kobezzza,
Советую добавить это пример как основной, чтобы люди себе мозг не трахали. Ты изобрел язык, а описание к нему очень скудное и не очевидное. Добавь вызовы, с передачей параметров, к примерам шаблонов. Вся очень просто, только когда знаешь.

Сейчас справка читается как псевдокод.

Gozar 07.02.2015 11:12

Ещё такой вопрос.

Данные в базе я храню с переносами строки \n, а при выводе нужно заменить на <br>. В snakeskin есть встроенный механизм замены? Флаг или ещё что-то? Если нет, то чтобы не экранировало <br> использовать https://github.com/kobezzza/Snakeskin/wiki/data ?

kobezzza 07.02.2015 13:31

Цитата:

Сообщение от Gozar (Сообщение 355506)
kobezzza,
Советую добавить это пример как основной, чтобы люди себе мозг не трахали. Ты изобрел язык, а описание к нему очень скудное и не очевидное. Добавь вызовы, с передачей параметров, к примерам шаблонов. Вся очень просто, только когда знаешь.

Сейчас справка читается как псевдокод.

Оки :)

Цитата:

Сообщение от Gozar (Сообщение 355506)
Выводиться будет в порядке обозначенном в html.ss.

Угу, а новые блоки, которых нет в родителе, добавятся в конец.

***

А почему ты пишешь param.title

Ты же забиндил параметр param c помощью with

https://github.com/kobezzza/Snakeskin/wiki/with

Т.е. ты можешь писать просто

@title


Цитата:

Сообщение от Gozar (Сообщение 355506)
Ещё такой вопрос.

Данные в базе я храню с переносами строки \n, а при выводе нужно заменить на <br>. В snakeskin есть встроенный механизм замены? Флаг или ещё что-то? Если нет, то чтобы не экранировало <br> использовать https://github.com/kobezzza/Snakeskin/wiki/data ?

Не совсем понял, что ты хочешь, т.е. у тебя есть параметр, который выводится и ты хочешь заменить там \n на br ?

{template some(param1)}
    {param1.replace(/\n/, '<br>')|!html}
{/}


Если я прав, то почитай главу (там кстати видео ещё есть)

https://github.com/kobezzza/Snakeski...80%D0%BE%D0%B2

https://github.com/kobezzza/Snakeski...BD%D0%B8%D0%B9

Ещё про output и call почитай.

Тем ни менее в базовом пакете фильтров такого фильтра нет, но его очень легко добавить самому, с другой стороны такой фильтр может есть смысл добавить из коробки, я подумаю над этим, спасибо.

PS: извини за долгий ответ, вчера был на тусе, а сегодня бошка трещит :(

kobezzza 07.02.2015 13:38

Ещё обратил внимание, что в твоём примере

{block body}
        {super}
        <div class="wrap">{param.title}</div>
{/}


Тут этот super не особо нужен, т.к. в родительском блоке ничего нет. Super в SS тоже самое что в ES6 и других языках с классами, т.е. просто вызов родителя и если его не использовать, то дочерний блок просто заменить родительскую реализацию, также следует отметить что super не обязательно должен быть в начале, т.е. можно вставить его в конец или середину и т.д. и это будет ожидаемо влиять на конечный код шаблона.

melky 07.02.2015 13:48

как бы заюзать SnakeSkin вместе с React?

как это сделать сначала шаблон компилим в HTML, а потом HTML в VDOM реакта?

Gozar 07.02.2015 14:00

Цитата:

Сообщение от melky
как это сделать сначала шаблон компилим в HTML, а потом HTML в VDOM реакта?

Как ты собираешься это сделать?. Это скомпилинная часть функции.
__RESULT__ += '<!DOCTYPE html>';
__RESULT__ += '<html lang="ru"> <head> ';
__RESULT__ += '<meta charset="UTF-8"> <title>';
__RESULT__ += __FILTERS__.html(__FILTERS__.undef(param.title), false, false);
__RESULT__ += '</title> <meta name="keywords" content="';
__RESULT__ += __FILTERS__.html(__FILTERS__.undef(param.meta_kwd), true, false);
__RESULT__ += '"> <meta name="description" content="';
__RESULT__ += __FILTERS__.html(__FILTERS__.undef(param.meta_des), true, false);
__RESULT__ += '"> ';

Gozar 07.02.2015 14:08

Цитата:

Сообщение от kobezzza
с другой стороны такой фильтр может есть смысл добавить из коробки

Очень бы хотелось.

Цитата:

Сообщение от kobezzza
Т.е. ты можешь писать просто
@title

Ага, поменял. Постепенно доходит. Уже заюзал {forEach @menu => @el} Полёт нормальный :)

kobezzza 07.02.2015 16:02

Цитата:

Как ты собираешься это сделать?. Это скомпилинная часть функции.
Ну он наверное имел ввиду работу с результатом работы шаблона, а SS как раз умеет формировать DocumentFragment, а не только строку.

Цитата:

Очень бы хотелось.
Думаю завтра вечером выкачу новый релиз, где добавлю этот фильтр и ещё пару фич.

Цитата:

Постепенно доходит.
Мне кажется, что тут главное понять, что SS по своей идеологии близок с JS, т.е. директивы повторяют конструкции JS (а иногда и улучшают): циклы, переменные (тут правда стоит отметить, что в отличии от var в JS, в SS блочная область видимости), условия, замыкания и т.д.

melky 07.02.2015 16:25

Цитата:

Сообщение от kobezzza
Ну он наверное имел ввиду работу с результатом работы шаблона, а SS как раз умеет формировать DocumentFragment, а не только строку.

угумс. только до меня не доходит, как тогда передавать данные


Часовой пояс GMT +3, время: 00:26.