riot.js apprend [trois] événements-js tutoriel-php.cn

riot.js apprend [trois] événements

黄舟

Libérer： 2017-01-16 16:04:07

original

1579 Les gens l'ont consulté

Pour chaque balise personnalisée, de la compilation à la construction en passant par la destruction finale, riot.js fournit les événements correspondants.

Il y a 4 événements intégrés :

la mise à jour

est exécutée avant que l'étiquette n'actualise réellement l'interface utilisateur. Cela nous permet de réécrire les données de contexte avant que la mise à jour de l'interface utilisateur

mise à jour

soit exécutée après la mise à jour de l'interface utilisateur de l'étiquette. À ce stade, nous pouvons exploiter le dom

mount

et l'exécuter une fois la balise construite et placée sur la page.

démonter

Exécuté lorsque la balise est supprimée de la page. [Généralement exécuté lorsque this.unmount() est appelé]

Prenons un exemple :

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

Copier après la connexion

L'effet est le suivant :

riot.js apprend [trois] événements

Sortie Ce sont : update -> update -> mount

Parce que this.unmount();

n'est pas appelé, la liaison de l'événement unmount

n'est pas imprimé, et vous pouvez lier plusieurs événements à la fois comme jquery, ou vous pouvez déclencher l'événement vous-même

Lier plusieurs :

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

Copier après la connexion

Événement déclencheur :

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

Copier après la connexion

Pièges pour les débutants :

L'événement unmount est déclenché après this.unmount(), ou une étiquette personnalisée est automatiquement déclenchée lors de la reconstruction

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

Copier après la connexion

Le premier paramètre du rappel d'événement n'est pas event

[code]this.on("update", function(a, b){
    console.log(a, b); // 1, 2
});
this.trigger("update", 1, 2);

Copier après la connexion

C'est très différent de jquery

Ce qui précède est comment riot.js apprend [3] le contenu des événements, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !