recherche

Maison  >  Article  >  interface Web  >  riot.js apprend [trois] événements

riot.js apprend [trois] événements

黄舟
黄舟original
2017-01-16 16:04:071578parcourir

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>

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都会经过这里
});

Événement déclencheur : 

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

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

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);

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 !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：riot.js apprenant [2] mixinArticle suivant：riot.js apprenant [2] mixin

Articles Liés

Voir plus