ホームページ >ウェブフロントエンド >jsチュートリアル >riot.js 学習 [3] イベント

riot.js 学習 [3] イベント

黄舟オリジナル: 2017-01-16 16:04:071620ブラウズ

コンパイルから構築、最終的な破棄まで、カスタムタグごとに、riot.js は対応するイベントを提供します。

4 つの組み込みイベントがあります:

update

ラベルが実際に UI を更新する前に実行されます。これにより、ラベル UI が更新された後に

updated

が実行される前にコンテキストデータを書き換えることができます。このとき、dom

mount

を操作できます。タグが構築されてページに配置された後、実行されます。

unmount

タグがページから削除されたときに実行されます。 [一般的に this.unmount() が呼び出されたときに実行されます]

例:

[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>

    <todo></todo>

</body>

<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
    <todo>
        <p>一个自定义标签 BY { title || "" }</p>

        // 监听4种事件
        // 执行顺序，跟绑定顺序无关
        this.on("updated", function(){
            // 这里可以操纵DOM
            console.log("updated");
        }).on("mount", function(){
            console.log("mount");
        }).on("unmount", function(){
            console.log("unmount");
        }).on("update", function(){
            // 这里可以注入数据
            this.title = "da宗熊";
            console.log("update");
        });
    </todo>
</script>

<script type="text/javascript">
    riot.mount("todo");
</script>
</html>

結果は次のとおりです:

riot.js 学習 [3] イベント

出力は次のとおりです: update -> updated ->mount

は呼び出されません ();

そのため、unmount

イベントのバインドは出力されません。jquery のように複数のイベントを一度にバインドすることも、自分でイベントをトリガーすることもできます

複数をバインド:

rreee

Triggerイベント:

[code]this.on("update mount", function(){
    // update和mount都会经过这里
});

初心者の落とし穴:

unmount イベントは this.unmount() の後にトリガーされるか、再構築時にカスタムラベルが自動的にトリガーされます

[code]this.trigger("update", "参数1", "参数2"...);

イベントコールバックの最初のパラメーターは、even

[code]riot.mount("todo");
riot.mount("todo"); // 第二次会先触发unmount，然后才是update/updated/mount

ではありません

これは jquery とは大きく異なります

上記は riot.js 学習 [3] イベントの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

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

前の記事：riot.js 学習 [2] ミックスイン次の記事：riot.js 学習 [2] ミックスイン

続きを見る

riot.js 学習 [3] イベント

関連記事