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

riot.js lernt [drei] Ereignisse

黄舟

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

Original

1623 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)!