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

您的防暴标记标记会插入到您的防暴标记中，即发生的事情是

ul
    li

来自您的工作示例的

实际上是

ul 
    menu-item
         li

在你的非工作示例中。由于bootstrap样式导航项期望某个层次结构，因此结果会被破坏。

这是一个问题（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>

不可否认，它不是语义

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

作品。

为什么riot.js打破了CSS？

3 个答案: