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