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

kobezzza 14.03.2016 19:22

Тут дело в том, что в СС7 появились неймспейсы, и при наследовании нужно указывать весь неймспейс целиком:

extends lalala.parent


Но, если шаблон наследования лежит в том же неймспейсе, что и базовый шаблон, то
можно проще:

extends @parent


Т.к. неймспейс создаёт неявный with блок с биндингом на себя.

Цитата:

Доки под новый синтаксис не сделали или я что-то не так делаю?
Над докой тружусь, но сильных различей между СС6 и СС7 в наследовании нет, поэтому можно юзать старую доку.

yazonnile 14.03.2016 19:25

О. Папка с тестами как всегда выручила :)
#{ template child(@params) extends @parent }


Собачку надо добавить :)

Цитата:

Сообщение от kobezzza (Сообщение 410966)
Над докой тружусь, но сильных различей между СС6 и СС7 в наследовании нет, поэтому можно юзать старую доку.

Спасибо.

kobezzza 14.03.2016 19:26

Цитата:

Собачку надо добавить
Если инклудится файл и там неймспейс другой, то нужно будет прописать весь неймспейс)

button.ss
- namespace ui.button

- template main()
  ...


super-button.ss
- include './button'
- namespace ui['super-button']

- template main() extends ui.button.main
  ...

yazonnile 15.03.2016 18:25

Привет.
Можете подсказать такую вроде не сложную вещину :) ?
задача глобальная - разбить все на микрочастицы, и комбинировать как хочется.

1.
Есть шаблон основной страницы
- namespace demo
- template layout.general(@params)
	- doctype
		< html
			< head
				< title
					{ @title }
				# style css
					.foo {}
				# script
					alert(1);
			< body
				< .hello
					Hello me!


2.
Есть модуль А
- namespace A

{ template html(@params) }
    < button
         { @buttonText }
{/ template }

#{ template styles(@params) }
#{ @buttonSelector } {
	background: #f00;
	outline: 0;
}
#{/}

#{ template scripts(@params) }
alert( #{@message} )
#{/}

{ template page(@params) }
???
{/ template }


Таких модулей может быть много.
Моя задача наследовать (может не совсем верная формулировка) каждый модуль от demo.layout.general
и на место стилей и скриптов в head ставить мои темплеиты.
Равно как и содержимое body также нужно заменить на A.html шаблон

Я пока себе не представляю, как это делается? При том, что мне нужно в каждый шаблон пробросить нужные переменные.

Т.е должно работать вроде как вот так
const a = ss.compileFile( path.resolve(__dirname, './../a.ss') );

a.page({
    message: 'Some alert message',
    buttonSelector: 'button.my-button',
    buttonText: 'Click me!',
    title: 'Кнопка же, ну'
});


Но я запутался с последовательностью.
Или в сторону block надо копать?

yazonnile 15.03.2016 18:29

Писать вот так не получается
< head
	< title
		{ @title }
	# style css
		{ block styles() }
			Hello world!
		{/ block }


Суть в том, что стили из шаблона А.styles мне будут нужны в двух видах.
Как здесь - внутри тега style
Так и как raw - чтобы вставить их в отдельный файл.

kobezzza 15.03.2016 18:45

Эммм, если я правильно понял, то есть мастер шаблон, и все остальные шаблоны должны от него наследоваться и заменять (или дополнять) некоторые его участки. Для этого будем использовать блоки и наследование.

base.ss

- namespace base

- template main()
  - doctype
  < html
    < head
      - block head
    < body
      - block body


child.ss

- namespace child
- include './base'

- template main() extends base.main
  - block head
    # style
      .foo { color: red }


Если при переопределении блока в дочернем шаблоне нужно вызвать тело родителя, то используем директиву super

- namespace child
- include './base'

- template main() extends base.main
  - block head
    - super
    # style
      .foo { color: red }

kobezzza 15.03.2016 18:56

Цитата:

Суть в том, что стили из шаблона А.styles мне будут нужны в двух видах.
Как здесь - внутри тега style
Так и как raw - чтобы вставить их в отдельный файл.
Всё просто, создаём шаблон со стилями и вызываем его внутри дочернего шаблона (шаблоны это просто функции, поэтому мы можем вызывать их внутри других шаблонов).

base.ss

- namespace base

- template main()
  - doctype
  < html
    < head
      - block head
    < body
      - block body


child.ss

- namespace child
- include './base'

#{template style()}

.foo { color: red }

#{/template}

- template main() extends base.main
  - block head
    - style
      += child.style() /// Или += @style() если не занят биндинг

yazonnile 15.03.2016 19:12

ой. Сработало.
Невнимательно переписал пример. Решетку убрать надо было.
А зачем она? Чем
# style
отличается от
- style
?

kobezzza 15.03.2016 19:20

Цитата:

Вот! То, что ищу, но оно не работает
Потому что вот здесь

# style


ты продекларировал расширенный синтаксис директив, вот тут

+= styles.test()


забыл про это и СС думает, что это просто текст :)

Исправь на

#+= styles.test()


А вообще в примере выше нет необходимость делать style через расширенный синтаксис, если всё что внутри неё будет - это просто вызов другого шаблона, т.к. расширенный синтаксис нужен если мы пишем текст, а тут просто вызов другого шаблона.

Цитата:

Или, к примеру, было бы ещё удобнее вот такая запись.
Как я понял, ты спрашиваешь возможно ли при вызове шаблона внутри другого шаблона передать ему подшаблон? Конечно можно :)

- template foo(content)
  < .wrapper
    {content}

- template bar()
  += foo()
    < .baz
      Hello world


Думаю смысл ясен :)

Если нужно передать несколько аргументов, то используем директиву putIn

- template foo(a, b, content1, content2)
  {a + b}
  < .wrapper1
    {content1}
  < .wrapper2
    {content2}

- template bar()
  += foo(1, 2)
      < .baz
        Hello world
    *
      < .bla
        Hello!


Больше примеров тут

yazonnile 15.03.2016 19:22

Это и спрашивал. Спасибо)
Пока все круто. Ну за исключением того, что сюда надо бегать за каждым чихом :)


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