爲什麼riot.js打破CSS？

爲了學習riot.js，我從着名的bootstrap navbar例子開始。然後，我添加使用riot.js我的自定義標籤：爲什麼riot.js打破CSS？

<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/[email protected](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）

來源

2015-07-10 algebrain

你防暴標籤標記插入到你的防暴標籤即會發生什麼是

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>

誠然，這不是語義

小提琴 - http://jsfiddle.net/86khqhwu/

來源

2015-07-11 10:45:20 potatopeelings

謝謝。儘管我不喜歡那個暴動標籤。 :( – algebrain

引導不適合於使用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-31 15:05:56 Beber

也許並不那麼優雅，但在騷亂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-31 02:56:12 aMarCruz

爲什麼riot.js打破CSS？

回答

相關問題