riot.js学习【三】事件-tutorial js-php.cn

riot.js学习【三】事件

黄舟

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

asal

1524 orang telah melayarinya

每个自定义标签从编译到构建，到最后的销毁，riot.js都提供了相应的事件。

内置有4种事件：

update

在标签真正刷新UI前执行。它允许我们在更新UI前，改写context的数据

updated

在标签UI更新之后执行。这时候，我们可以对dom进行操作了

mount

在标签构建完成，放在页面后执行。

unmount

当标签从页面移除的时候执行。【一般是调用this.unmount()时执行】

打个例子：

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

Salin selepas log masuk

效果如下：

输出分别为: update -> updated -> mount

因为没有调用this.unmount();

所以没打印出 unmount

事件的绑定，也可以类似jquery一样，一次绑定多个事件，又或者自己去触发事件

绑定多个：

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

Salin selepas log masuk

触发事件：

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

Salin selepas log masuk

新手遇坑：

unmount事件，在this.unmount()之后触发，或者自定义标签，重新构建时，自动触发

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

Salin selepas log masuk

事件回调的第一个参数，并不是event

[code]this.on("update", function(a, b){
    console.log(a, b); // 1, 2
});
this.trigger("update", 1, 2);

Salin selepas log masuk

这一点跟jquery是大大的不一样

以上就是riot.js学习【三】事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

riot.js学习【三】事件