riot.js lernt [drei] Ereignisse-js-Tutorial-php.cn

riot.js lernt [drei] Ereignisse

黄舟

Freigeben： 2017-01-16 16:04:07

Original

1524 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Obige zeigt, wie riot.js [3] Ereignisse lernt Inhalt, z Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

riot.js lernt [drei] Ereignisse