Почему riot.js ломает css?

Question

Чтобы узнать о riot.js, я начал с известного примера бутстрап-навигатора. Затем я добавил свой собственный тег с помощью riot.js:

<script type="riot/tag"> 
    <menu-item> 
    <li><a href={this.href}><yield/></a></li> 
    this.href = opts.href 
    </menu-item> 
</script> 

<script src="https://cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)"></script> 
<script> 
    riot.mount('*') 
</script> 

Наконец я попытался использовать свой новый тег, заменяющий

<li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> 

по

<menu-item href="http://getbootstrap.com/javascript">JavaScript</menu-item> 

Result сломана. Зачем? (Оригинальный не разбитый пример можно найти здесь: jsfiddle.net/0hp9pwpu)

Answer 1

Вашего бунт тег разметки вставляется в бунте тег то, что происходит,

ul 
    li 

из вашего рабочего примера фактически

ul 
    menu-item 
     li 

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

Это был поднят вопрос (https://github.com/riot/riot/issues/295) и закрывается с помощью https://github.com/riot/riot/pull/569 то есть вместо того, чтобы использовать теги бунта непосредственно есть возможность добавить бунт тег в качестве атрибута. Так что-то вроде

<li riot-tag="menu-item" href="http://getbootstrap.com/javascript">JavaScript</li> 

Правда, это не так семантического

---

Fiddle - http://jsfiddle.net/86khqhwu/

Answer 2

Bootstrap не приспособленный для использования с Riot.js

Вашего результата HTML является:

<menu-item href="http://getbootstrap.com/javascript"> 
    <li> 
     <a href="http://getbootstrap.com/javascript">JavaScript</a> 
    </li> 
</menu-item> 

Bootstrap CSS сломана ...

Answer 3

Может быть, не так элегантно, но в бунте 2.3.13 я использую что-то вроде этого в .tag файле:

<menu-bar> 
    <ul list="<yield/>"> 
    <li each={ item in items }> 
     <a href="http://localhost/pages/{ item }.html">{ titles[item] }</a> 
    </li> 
    </ul> 

    <script> 
    this.titles = { 
     inventario: 'Inventario', 
     resguardos: 'Resguardos', 
     catalogos: 'Catálogos', 
     reportes: 'Reportes', 
     configurar: 'Configurar', 
     utilidades: 'Utilidades' 
    } 
    this.items = null 

    this.on('mount', function() { 
     var el = this.root.querySelector('ul') 
     this.items = el.getAttribute('list').trim().split(/,\s?/) 
     el.removeAttribute('list') 
     this.update() 
    }) 
    </script> 
</menu-bar> 

Теперь на странице HTML :

<menu-bar> 
    inventario,resguardos,catalogos,reportes 
</menu-bar> 

Работы.