Riot / JS: Как динамически создать стандартный HTML-элемент (например, OL или UL) в теге - PullRequest
Новая
       28

Riot / JS: Как динамически создать стандартный HTML-элемент (например, OL или UL) в теге

0 голосов
/ 30 мая 2018

Предположим, у меня есть следующий тег 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.

. Есть ли способ решить эту проблему без изменения HTML, созданногоБунт (то есть, не касаясь свойства .innerHTML) ?

1 Ответ

0 голосов
/ 31 мая 2018

Как я вижу, вы хотите передать этот "обширный внутренний код" через опции или создать его динамически.Таким образом, вы можете сделать что-то вроде этого: 

<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);
}});
...