微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

是否可以在自定义防暴标签的最外面的元素上省略一些选择?

如何解决是否可以在自定义防暴标签的最外面的元素上省略一些选择?

我正在使用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><li>上。

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

// good output
<my-list>

这可能吗?

此外,我从与React的合作中得知,我将来可能会遇到一些情况,这些情况是我希望其中的 some 个选项出现在包装程序中,同时隐藏其他选项。因此,理想情况下,我想知道如何根据选择来控制此行为。

解决方法

您可以在“ updated”和“ mount”事件中删除不需要的属性。

check this demo

但是我强烈建议您切换到riot @ 5!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。