riot.js 学習 [3] イベント-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-01-16 16:04:07

オリジナル

1524 人が閲覧しました

コンパイルから構築、最終的な破棄まで、カスタムタグごとに、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) に注目してください。

php 8、私も来ます

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

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

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

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

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

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

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

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

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

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

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

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

Websocket ビデオチュートリアル

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