Home > Article > Web Front-end > riot.js learning [three] events

riot.js learning [three] events

黄舟Original: 2017-01-16 16:04:071510browse

For each custom tag, from compilation to construction to final destruction, riot.js provides corresponding events.

There are 4 built-in events:

update

Executed before the label actually refreshes the UI. It allows us to rewrite the context data before updating the UI

updated

It is executed after the label UI is updated. At this time, we can operate the dom

mount

After the tag is built and placed on the page, it is executed.

unmount

Executed when the tag is removed from the page. [Generally executed when this.unmount() is called]

Take an example:

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

The effect is as follows:

riot.js learning [three] events

The output is as follows: : update -> updated -> mount

Because this.unmount();

is not called, the binding of the unmount

event is not printed out, it can also be similar Same as jquery, bind multiple events at one time, or trigger the event yourself

Bind multiple:

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

Trigger event:

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

Newbie’s pitfall:

The unmount event is triggered after this.unmount(), or a custom label is automatically triggered when rebuilding

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

The first parameter of the event callback , not event

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

This is very different from jquery

The above is the content of the riot.js learning [three] event. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：riot.js learning [2] mixinNext article：riot.js learning [2] mixin

See more

riot.js learning [three] events

Related articles