riot.js学习【三】事件

最新推荐文章于 2024-04-27 10:06:18 发布

da宗熊

最新推荐文章于 2024-04-27 10:06:18 发布

阅读量3.9k

点赞数

分类专栏： web前端 roit-js 文章标签： riot-js javascrpit js 前端 mvp

本文链接：https://blog.csdn.net/linfenpan/article/details/46469709

版权

web前端同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

roit-js

10 篇文章 1 订阅

订阅专栏

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

内置有4种事件：

update

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

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

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

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

打个例子：

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

效果如下：

输出分别为: update -> updated -> mount
因为没有调用this.unmount();
所以没打印出 unmount

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

绑定多个：

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

触发事件：

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

新手遇坑：

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

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

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

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

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

da宗熊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
riot.js学习【三】事件

每个自定义标签从编译到构建，到最后的销毁，riot.js都提供了相应的事件。内置有4种事件：update在标签真正刷新UI前执行。它允许我们在更新UI前，改写context的数据updated在标签UI更新之后执行。这时候，我们可以对dom进行操作了mount在标签构建完成，放在页面后执行。unmount当标签从页面移除的时候执行。【一般是调用this.unmount()时执行】打个例子：
复制链接

扫一扫