riot.js教程【五】标簽嵌套、命名元素、事件、标簽條件

前文回顧 <a href="http://www.cnblogs.com/liulun/p/7831084.html">riot.js教程【四】Mixins、HTML内嵌表達式</a> <a href="http://www.cnblogs.com/liulun/p/7827072.html">riot.js教程【三】通路DOM元素、使用jquery、mount輸入參數、riotjs标簽的生命周期；</a> <a href="http://www.cnblogs.com/liulun/p/7681073.html">riot.js教程【二】元件撰寫準則、預處理器、标簽樣式和裝配方法；</a> <a href="http://www.cnblogs.com/liulun/p/7672876.html">riot.js教程【一】簡介；</a>

讓我們定義一個父标簽account，一個子标簽subscription

注意：show_details的命名方式，這裡不能寫成駝峰式的名字，因為浏覽器解析标簽的時候會把大寫轉成小寫

接下來我們把account标簽添加到頁面的body中

父标簽的參數是通過riot.mount方法傳遞的，子标簽的參數是通過标簽屬性傳遞過去的

注意：嵌套的标簽總是在父标簽内部聲明，定義；

我們先定義一個my-tag标簽

注意：這裡有一個yield占位符，我們稍後再講它

現在我們在頁面上使用這個标簽

那麼他渲染出來之後，是如下這個樣子的：

你看到了嗎？yield占位符輸出的，其實是text變量

這就是在标簽内嵌入HTML代碼

當元素具備ref屬性的時候，

這個元素會被連結到this.refs上，

這樣你就可以很友善的用JS通路到它

注意，這個指向的操作，是在mount事件被觸發前完成的，是以你可以在mount事件中通路到this.refs

DOM事件可以直接和riotjs标簽内的方法綁定，示例如下：

隻要事件名以on開頭的，比如：onclick, onsubmit, oninput，都可以直接綁定方法

這類事件也可以直接綁定一句表達式，如下：

在事件方法内，this指代本标簽執行個體，方法執行完之後，會馬上執行this.update()事件，

如果你在方法内部，使用了event.preventUpdate，那麼方法執行完之後，就不會執行this.update()事件；

方法的第一個參數就是标準的event對象

e.currentTarget 指代觸發事件的DOM元素

e.target 也指代觸發事件的DOM元素

e.which 指代按鍵代碼 (keypress, keyup, 等).

你可以使用标簽條件來決定是否需要顯示一個标簽，如下：

注意，标簽條件的值可以是一個變量，也可以是一個表達式

除了if之外，還可以使用show和hide來決定是否顯示一個标簽

show – 當值是true的時候，相當于 style="display: ''"

hide – 當值是true的時候，相當于 style="display: none"

if – 當值是true的時候，會把該标簽加入到DOM元素中，是false的時候，不會把标簽加入到dom元素中