riot.js 学習 [1] カスタムタグ-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-01-16 15:59:44

オリジナル

1276 人が閲覧しました

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) にご注意ください

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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