Javascript-форум

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Snakeskin (https://javascript.ru/forum/project/35057-snakeskin.html)

Цитата:

А зачем она? Чем
# style
отличается от
- style

Решётка декларирует расширенный синтаксис, это означает что все вложенные директивы должны также использовать его.

- template foo()
  # script
    var a = {}; /// Не будет ошибки т.к. мы используем расширенный синтаксис

Цитата:

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

Зато когда освоишь СС то сможешь такие штуки писать, что закачаешься :)

Цитата:

Сообщение от kobezzza

Зато когда освоишь СС то сможешь такие штуки писать, что закачаешься

Яростно плюсую)

Еще небольшой вопрос, если позволите.

< some
создаем тег some

- some
? простая директива?

# some
расширенная директива?

Почему спрашиваю.
Встала задача, которую пока не решил, и пропустил.
В переменной приходит селектор, который должен раскрыться в тег

Например span.some
Сейчас использую вот так (класс вручную, а в переменной только класс)

< span (class = ${ @markup.spanClass })
    { @markup.spanText }

А вот так не получилось

< ${ @spanSelector }
	{ @markup.spanText }

Тк на выходе получал

<span.some>span text</span.some>

:))

{tag ${ @spanSelector }}
    Hello world
{/tag}

Результат тот же

Цитата:

< some
создаем тег some

< - это сокращённый синтаксис для - tag, т.е.

- tag some

Даст такой же ответ. Сокращённые варианты есть лишь у некоторых директив и преследуют исключительно цель удобства написания

Цитата:

- some
? простая директива?

- обозначает, что следующий параметр будет имя директивы, но если директивы с таким именем нет, то будет использоваться либа директива output или global или const или decorator :) Т.е. всё зависи от контекста:

- template foo()
- var bla = 1
- bla /// 1
- bar = 2 /// создаст константу bar

Цитата:

# some
расширенная директива?

Расширенный синтаксис, его можно использовать с любой директивой и он просто означает, что все вложенные директивы должны использовать синтаксис #{ ... } и т.д. и это нужно, чтобы не было конфликтов с JS/CSS вставками, т.к. там используются блоки {}.

Цитата:

Например span.some
Сейчас использую вот так (класс вручную, а в переменной только класс)

Можно проще:

< span.${ @markup.spanClass }

И зачем взял в круглые скобки?

Цитата:

А вот так не получилось

< ${ @spanSelector }
    { @markup.spanText }

Тк на выходе получал
<span.some>span text</span.some>

Интерполяция в декларации тега требует, чтобы ты явно ставил разделитель класса, названия тега и ИД, например,

< ${tagName}#${idName}.${className1}.${className2}

Интерполяция также работает и при ручном задание атрибутов

< span ${attr1} = ${attrVal1}

А также можно использовать интерполяцию с объектом:

- var attrs = { foo: 1, bar: 2 }
< .foo ${attrs}

Спасибо за подробное объяснение.

Т.е раскрыть строку span.some в тег с классом не выйдет?

Цитата:

Т.е раскрыть строку span.some в тег с классом не выйдет?

- template foo(selector)
  /// Сокращение для - var
  : chunks = selector.split('.')
  < ${ chunks[0] }.${ chunks[1] }

Или более универсальный вариант (если классов много)

- template foo(selector)
  : chunks = selector.split('.')
  < ${ chunks[0] } сlass = ${ chunks.slice(1).join(' ') }

И в догонку :)
Почему?

< span ${attr1} = ${attrVal1}
Но
< span
     {attr1} = {attrVal1}

Цитата:

Почему?

Потому что, когда мы используем синтаксис управляющих пробелов каждая инструкция должна быть на 1-й строке, т.е. в твоём примере - это 2 разных инструкции, НО для того, что ты хочешь есть специальные операторы многострочного ввода:

< .foo &
  bla = 1 |
  baz = 2
.

Если использовать классический синтаксис, то это не нужно.

{< .foo
  bla = 1 |
  baz = 2
}{/}

А стоп, не понял вопрос сначала. Ты спрашиваешь почему ${} и {}?

Потому что ${} - это синтаксис интерполяции, т.е. мы внутрь инструкции вставляем живые значения, а {} - это просто декларация директивы

< ${'foo'}
  {a} - {b}

Тоже самое на классическом синтаксисе

{< ${'foo'}}
  {a} - {b}
{/}

А разный синтаксис по 2-м причинам:

1) Визуальное отличие, чтобы не запутаться
2) Чтобы не было конфликтов с использованием {} блоков внутри директивы, например

/// <div class="foo" bla="{a: 1, b: 2}"></div>
< .foo bla = {a: 1, b: 2}

Понял. спасибо!

Хорошего дня