为什么riot.js会破坏css？

Question

为了学习riot.js，我从大家熟知的bootstrap navbar示例开始。然后，我使用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

您的riot标签标记被插入到您的riot标签中，即发生的情况是

ul
    li

来自您的工作示例实际上是

ul 
    menu-item
         li

在您的非工作示例中。由于bootstrap设置导航项目的样式需要某个层次结构，因此您的结果是错误的。

这是作为一个问题(https://github.com/riot/riot/issues/295)提出的，并使用https://github.com/riot/riot/pull/569关闭，即可以选择添加riot标签作为属性，而不是直接使用riot标签。所以就像这样

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

无可否认，它不是语义上的

小提琴- 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

也许不是那么优雅，但在riot 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>

很管用。