ExtraMarkup уникальный id

[Boriss]

В новом релизе заявлено: Если свойство Разметка содержит атрибуты id, что часто бывает в SVG, то необходимо
вставить в идентификаторы элементы форматирования {0} и включить свойство
Уникальные ID. В этом случае при формировании HTML элементы {0} будут заменены на
значение атрибута id компонента, обеспечивая уникальность идентификаторов на странице.

Что-бы понять, как работает, взял из примеров файл Damper.fp и добавил к еще одному id {0}.

<svg width="100%" height="100%"
     viewBox="0 0 220 140"
     xmlns="http://www.w3.org/2000/svg">

  <!-- воздуховод -->
  <rect id="{0}rect" x="20" y="50" width="180" height="40"
        fill="#e0e0e0" stroke="#333" stroke-width="2"/>

  <!-- ось -->
  <circle cx="110" cy="70" r="4" fill="#333"/>

  <!-- заслонка -->
  <g id="{0}damper" transform="rotate(0 110 70)">
      <rect x="70" y="66"
            width="80"
            height="8"
            fill="#9e9e9e" 
            stroke="#444"
            stroke-width="2"/>
  </g>

</svg>

В результате этот механизм срабатывает только один раз. Результат на скриншоте : https://disk.yandex.ru/i/jEUYOQBQXOAYnA

Изменился только один id. Что я делаю не так? Как это работает?

• Тема изменена 1 месяц, 2 недели назад пользователем Mikhail.

[manjey73]

Однако вы ещё столкнетесь со ссылками на эти id, а не только с ними.
Тут главное получить id, дальше портянка скрипа.
Я это делал в скрипте фейсплейта, а мне тоже нужно в скрипте компонента.

[manjey73]

http://176.109.111.174:10008/View/17

ggg
321

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

[Mikhail]

Добрый день!
Скорее всего, ошибка.
Напишу сюда, как будет информация или исправление.

[Boriss]

Mikhail, спасибо. Будем ждать.

Однако вы ещё столкнетесь со ссылками на эти id, а не только с ними.
Тут главное получить id, дальше портянка скрипа.

Ссылки на id никак не получить. Потому как всё, что внутри ExtraMarkup это значение ключа. Строковое. innerHTML: ‘<svg width=»100%» height=»100%» xml и т.д.
Единственный способ добраться до элемента dom, это метод перебора. Что-то вроде args.component.dom.find(‘#g2’).attr(‘transform’, transform); Другие способы я не нашел. Поэтому надо просто сделать id уникальными.
Но могу и ошибаться, программист из меня так себе…

[manjey73]

Михаил, если можно, то удалите при исправлении добавление дефиса после уникального id
Сейчас при использовании {0} после id добавляется — после id, но кто сказал, что {0} удобно использовать ПЕРЕД своим id а не после?

Только что проверил, в ссылках тоже работает {0} (оставил только один {0} в месте ссылки svg.

args.component.dom.find(‘#g2’).attr(‘transform’, transform);

Да, так и есть, id при поиске тут выручает, в первоначальном примере Солнышка от Михаила поиск был по rect, но он не подходит, так как у нас могут быть в svg нескольько rect и так далее.

мой пример при самостоятельном создании id

const urov = args.component.properties.uroven;
 args.component.dom.find("#" + getUniqueId("uroven", curid)).attr("height", urov+"%");

при наличии использования уникальных id будет проще, не будет нужен скрипт создания уникальных id

[Boriss]

Так поставьте {0} после id.
На примере Damper.fp
А «-» добавляется в этой строчке в скрипте компонента
const idPrefix = args.component.dom.attr("id") + "-1-";
Если надо {0} после id, то:

const idPrefix = "-" + args.component.dom.attr("id") + "-1";

args.component.dom.find(<code>#damper${idPrefix}</code>).attr("transform", <code>rotate(${angle} 110 70)</code>)

Примерно так, но возможны ошибки, пишу без проверки работоспособности.

[Boriss]

Движек форума — ужос!

[Mikhail]

> Движек форума — ужос!
Согласен.

[manjey73]

const urov = args.component.properties.uroven;

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

[manjey73]

То есть мне надо получить args.component.PARENT.properties.uroven

Простым языком если так будет понятнее.

[Boriss]

Сами ответили на свой вопрос.
args.component.parent.properties.uroven
Я сделал именно так

[manjey73]

О, так можно было? 😀
Ща домой доберусь, проверю.

Интересно, а можно как-то сокращённо писать?
Вот чтобы каждый раз не писать args.component.parent и т.д.
А просто props.uroven

Что для этого надо сделать в js ?

[Boriss]

Можно. Объявите props2 или propsP или как-то еще:
let props2 = args.component.parent.properties
и ссылка сократится до
props2.uroven

[Boriss]

Было-бы не плохо, если прикрутить уникальные id к экспортируемым параметрам…
Вопрос к Mikhail
На фейсплейте более 10 одинаковых не стандартных компонентов со скриптами. В скрипте несколько параметров, на подобие «uroven», которые требуется экспортировать. И вот к ним хорошо бы добавить уникальный id как в случае с разметкой. Возможно ли это?

[Автор]

Сообщения