riot.js learning [three] events-JS Tutorial-php.cn

riot.js learning [three] events

黄舟

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

Original

1620 people have browsed it

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>

Copy after login

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

Copy after login

Trigger event:

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

Copy after login

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

Copy after login

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

Copy after login

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