Блог

Я использую RiotJS v3.9

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

В этом случае мой пользовательский тег отображает список элементов. Одним из вариантов, которые он принимает, является значение для определенного data- атрибута в каждом элементе списка. Итак, я хочу data-something={opts.itemSomething} отображаться в каждом элементе списка, но я не хочу, чтобы это отображалось в оболочке.

 // my-list.tag
<my-list>
    <ul data-something={ opts.something }>
        <li
            each={ item in opts.items }
            data-something={ parent.opts.itemSomething }
        >
            { item }
        </li>
    </ul>
</my-list>
  

Используя его:

 <my-app>
    
    <my-list
        something="parent-value"
        item-something="child-value"
        items={['one', 'two', 'three']}
    />
    
</my-app>
  

Что он передает на страницу:

 <my-list something="parent-value" item-something="child-value">
    <ul data-something="parent-value">
        <li data-something="child-value"> one </li>
        <li data-something="child-value"> two </li>
        <li data-something="child-value"> three </li>
    </ul>
</my-list>
  

Я не хочу, чтобы в исходящем <my-list> теге было либо родительское, либо дочернее значение. Я хочу, чтобы эти атрибуты отображались только в <ul> and <li> , как я это закодировал.

 // bad output
<my-list something="parent-value" item-something="child-value">

// good output
<my-list>
  

Возможно ли это?

Кроме того, я знаю из работы с React, что я, вероятно, столкнусь с будущими случаями, когда я хочу, чтобы некоторые опции отображались в оболочке, скрывая другие. Итак, в идеале я хотел бы знать, как контролировать это поведение на основе каждого выбора.

вы можете удалить нежелательные атрибуты как в событии «обновлено», так и в событии «монтировать».

проверьте эту демонстрацию

Однако я настоятельно рекомендую вам переключиться на riot @ 5!!