0

为了学习 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>

结果坏了。为什么？（原始完整示例可在此处找到：jsfiddle.net/0hp9pwpu）

4

3 回答 3

5

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

ul
    li

从你的工作示例实际上是

ul 
    menu-item
         li

在您的非工作示例中。由于引导程序样式的导航项需要特定的层次结构，因此您的结果会被破坏。

这是作为一个问题提出的（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/

于 2015-07-11T10:45:20.430 回答
0

Bootstrap 不适用于 Riot.js

您生成的 html 是：

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

引导 css 坏了...

于 2015-07-31T15:05:56.643 回答
0

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

作品。

于 2016-01-31T02:56:12.327 回答