html - Riot/JS：如何在标签中动态创建标准 HTML 元素（例如，OL 与 UL）

Question

假设我有以下 Riot/JS 标签：

<my-list>
    <ol if="{this.opts.isOrdered}">
        <li><!-- extensive inner code --></li>
    </ol>
    <ul if="{!this.opts.isOrdered}">
        <li><!-- extensive inner code (same as above) --></li>
    </ul>
</my-list>

如您所见，这里的问题是我必须重复大量的内部代码。这只是 OL 与 UL 的拆分（即两个预定义选项）；很容易想象其他拆分，特别是如果想要一个动态（非预定义）包装元素，如this.opts.

有没有办法在不修改 Riot 创建的 HTML 的情况下解决这个问题（即，不触及.innerHTML属性）？

标签： htmlriot.js

Answer 1

如我所见，您想通过 opts 传递此“广泛的内部代码”或动态创建它。所以你可以做这样的事情：

<my-list>
<ol id="ol_id" if="{this.opts.isOrdered}">
    <li><!-- extensive inner code --></li>
</ol>
<ul id="ul_id" if="{!this.opts.isOrdered}">
    <li><!-- extensive inner code (same as above) --></li>
</ul>

对于 JS 部分：

this.on('mount', function () {
if (this.opts.isOrdered) {
    var ol_el = document.getElementById("ol_id");
    var extensive_inner_element = document.createElement('<required_element_or_custom_tag>');
    ol_el.appendChild(extensive_inner_element);
}
if (!this.opts.isOrdered) {
    var ul_el = document.getElementById("ul_id");
    var extensive_inner_element = document.createElement('<required_element_or_custom_tag>');
    ul_el.appendChild(extensive_inner_element);
}});