suchen

Heim >Web-Frontend >js-Tutorial >riot.js lernt [drei] Ereignisse

riot.js lernt [drei] Ereignisse

黄舟
黄舟Original
2017-01-16 16:04:071610Durchsuche

Für jedes benutzerdefinierte Tag, von der Kompilierung über den Aufbau bis zur endgültigen Zerstörung, stellt riot.js entsprechende Ereignisse bereit.

Es gibt 4 integrierte Ereignisse:

Update

wird ausgeführt, bevor das Label die Benutzeroberfläche tatsächlich aktualisiert. Es ermöglicht uns, die Kontextdaten neu zu schreiben, bevor die Aktualisierung der Benutzeroberfläche

aktualisiert

ausgeführt wird, nachdem die Etiketten-Benutzeroberfläche aktualisiert wurde. Zu diesem Zeitpunkt können wir den Dom

mount

bedienen und ausführen, nachdem das Tag erstellt und auf der Seite platziert wurde.

unmount

Wird ausgeführt, wenn das Tag von der Seite entfernt wird. [Wird im Allgemeinen ausgeführt, wenn this.unmount() aufgerufen wird]

Zum Beispiel: 

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

Der Effekt ist wie folgt:

riot.js lernt [drei] Ereignisse

Ausgabe Sie sind: update -> aktualisiert -> mount

Da this.unmount(); nicht gedruckt, und Sie können mehrere Ereignisse gleichzeitig wie jquery binden oder das Ereignis selbst auslösen

Mehrere binden:


Ereignis auslösen: 

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

Das Unmount-Ereignis wird nach this.unmount() ausgelöst, oder ein benutzerdefiniertes Label wird automatisch beim Neuaufbau ausgelöst 
[code]this.trigger("update", "参数1", "参数2"...);



[code]riot.mount("todo");
riot.mount("todo"); // 第二次会先触发unmount，然后才是update/updated/mount
Der erste Parameter des Ereignisrückrufs ist nicht Ereignis
Dies unterscheidet sich stark von jquery
[code]this.on("update", function(a, b){
    console.log(a, b); // 1, 2
});
this.trigger("update", 1, 2);
Das Obige zeigt, wie riot.js [3] Ereignisse lernt Inhalt, z Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：riot.js lernt [2] MixinNächster Artikel：riot.js lernt [2] Mixin

In Verbindung stehende Artikel

Mehr sehen