ホームページ > 記事 > ウェブフロントエンド > riot.js 学習 [1] カスタムタグ

riot.js 学習 [1] カスタムタグ

黄舟オリジナル: 2017-01-16 15:59:441225ブラウズ

Riot.js の最も強力な機能はカスタムタグです。まず、コードの一部を見て効果を見てみましょう:

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>

    <!-- 调用自定义标签 -->
    <timer start="10"></timer>

</body>

<!-- 最前面一定要有空格或TAB，留意它的type -->
<script type="riot/tag">
    <timer>
        <h3>Times: { index }</h3>
        this.index = opts.start || 0;

        var self = this;
        tick(){
            // 每个1秒，index自增
            this.index++;
            // 调用this.update更新UI【最欣赏这个了，能自己控制】
            this.update();
        }
        var timer = setInterval(this.tick, 1000);
    </timer>
</script>

<!-- 调用riot，启动自定义标签timer -->
<script type="text/javascript">
    riot.mount("timer");
</script>
</html>

効果は次のとおりです [1 秒ごとに、回数の値は +1]:

riot.js 学習 [1] カスタムタグ

初心者が遭遇する落とし穴について話しましょう:

script type="riot/tag"

コンパイラーは、スクリプト type="riot/tag" を持つすべての要素を走査します。外部のファイルをロードします。src がない場合は、スクリプトの内容がコンパイルされます。

追記: スクリプトに記述されたコンテンツはスペースまたはタブで始まる必要があり、その直後に「
これは内部パーサーに関連しています [最初はかなり混乱しました...]

tick()

この関数の this オブジェクトは、xx(){ である限り、現在のカスタムタグのコンテキストです。関数とコンテキストはすべてラベルのコンテキストとして指定され、this.tick を通じてアクセスできます。

他の MV* エンジンほど自動化されていないように感じるかもしれませんが、戻りを手動で制御する方が柔軟です

opts

コードには、非常に奇妙な変数 opts があります:

[code]this.index = opts.start || 0;

実際、その値は this です。opts はカスタムタグによって渡される属性です。
例:

[code]<timer start="10"></timer>

Then this.opts.start/opts.start is等しい 10{ Index } riot.js は、単純な式と三項判定をサポートする強力な値読み取りメソッドです。ただし、{} には二重引用符 " の代わりに単一引用符 ' を使用する必要があるという落とし穴があります。そうしないと、解析エラーが非常に発生しやすくなります。 man' : 'little kid' } 、
外部タグ定義ファイルの参照をサポート

[code]<script src="todo.tag" type="todo/tag"></script>

todo.tagのコンテンツとコンパイルをサポートできます。上記の例に従って

を書くだけです上記は riot.js の学習です [1] カスタムタグのコンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JSカルーセルチャートでのイージング関数のカプセル化次の記事：JSカルーセルチャートでのイージング関数のカプセル化

続きを見る

riot.js 学習 [1] カスタムタグ

関連記事