Question

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

variable group

正如您所看到的，这里的问题是我必须重复广泛的内部代码。这只是一个OL与UL的分裂（即两个预定义的选项）;很容易想象其他拆分，特别是如果想要<my-list> <ol if="{this.opts.isOrdered}"> <li></li> </ol> <ul if="{!this.opts.isOrdered}"> <li></li> </ul> </my-list>中定义的动态（非预定义）包装元素。

有没有办法解决这个而不修改Riot创建的HTML（即没有触及this.opts属性）？

Answer 1

正如我所看到的，你想通过这个＆＃34;广泛的内部代码＆＃34;通过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);
}});

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

1 个答案: