riot.js學習【七】腳本創建標籤

建立標籤

在Riot中，我們透過html程式碼，建立自訂標籤，但實際上，最終可運行的自訂標籤，會被編譯成腳本。

實際上，一段這樣的自訂標籤程式碼:

<script type="riot/tag">
    <todo>        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";    </todo></script>

經過編譯後，會成為一段真正可執行的腳本，像這樣子：

riot.tag(&#39;todo&#39;, &#39;<h1>{ title }</h1>&#39;, function(opts) {

    this.title = opts.title || "da宗熊";

});

riot.tag必填的參數有3個：

riot.tag('标签名', '模版内容', 初始化函数);

可選參數有兩個，分別是樣式和屬性：

riot.tag('标签名', '模版内容', '样式', fn);
或:riot.tag('标签名', '模版内容', '属性', fn);
或:riot.tag('标签名', '模版内容', '样式', '属性', fn);

樣式：

樣式的內容，會被放在head裡的一個style標籤內。 
所以，樣式的正確寫出如下：

riot.tag(&#39;todo&#39;, &#39;<p class="title">{opts.title}</p>&#39;, &#39;.title{color:#ff0;}&#39;, function(opts){
    // todo something});

樣式需要寫完成的選擇器，關聯樣式。

屬性：

屬性的內容，最終會體現在context.opts裡，屬性的正確編寫方式如下：

riot.tag(&#39;todo&#39;, &#39;<p>{ opts.title }</p>&#39;, &#39;title="da宗熊" age="26"&#39;, function(opts){
    // todo something});

新手遇坑

官網說，屬性表達式必須帶引號，如：value=”{ val }” 代替value={ val }【BUT，2.1版親身測試，沒啥區別，有大牛解析麼？ 】

Boolean屬性：__checked=”{ isTrue }” 代替 checked={ isTrue }【這個絕對要！ 】

img標籤的src，最好寫為riot-src，避免錯誤的請求

使用riot-style代替style，為了兼容ie

以上就是riot.js學習【七】腳本創建標籤的內容，更多相關內容請關注PHP中文網（www.php.cn）！