0

riot.js を学ぶために、よく知られているブートストラップ 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>

結果は壊れています。なんで？(壊れていない元の例は、jsfiddle.net/0hp9pwpu にあります)

4

3 に答える 3

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 に答える