riot.js learning [1] Custom tags-JS Tutorial-php.cn

riot.js learning [1] Custom tags

黄舟

Release： 2017-01-16 15:59:44

Original

1317 people have browsed it

The most powerful function of Riot.js is custom tags. First, let’s take a piece of code and see the effect:

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

    <!-- 调用自定义标签 -->
    <timer start="10"></timer>

</body>

<!-- 最前面一定要有空格或TAB，留意它的type -->
<script type="riot/tag">
    <timer>
        <h3>Times: { index }</h3>
        this.index = opts.start || 0;

        var self = this;
        tick(){
            // 每个1秒，index自增
            this.index++;
            // 调用this.update更新UI【最欣赏这个了，能自己控制】
            this.update();
        }
        var timer = setInterval(this.tick, 1000);
    </timer>
</script>

<!-- 调用riot，启动自定义标签timer -->
<script type="text/javascript">
    riot.mount("timer");
</script>
</html>

Copy after login

The effect is as follows [for every 1 second, the value of times is +1] ：

riot.js learning [1] Custom tags

Let’s talk about the pitfalls that newcomers will encounter:

script type=”riot/tag”

compiler It will traverse all elements with script type="riot/tag". If the script has src, the external file will be loaded. If there is no src, the content in the script will be compiled.

PS: The content written in the script must start with a space or tab. If it is directly followed by "<", the content will not be compiled.

This is related to its internal parser [It was quite confusing the first time...]

tick()

The this object of this function is the current customization The context of the label, as long as the function declared like xx(){}, the context is specified as the context of the label

The tick function can be accessed through this.tick

this.update

This.update(); must be called before the content of the UI will be updated.

You may feel that there is no other MV* engine automation, but manual control of return will be more flexible

opts

In the code, there is a very strange variable opts:

[code]this.index = opts.start || 0;

Copy after login

In fact, its value is this.opts, which is the attribute passed in by the custom tag.
For example:

[code]<timer start="10"></timer>

Copy after login

Then this.opts.start/opts.start is equal to 10
{ index }
riot.js is a powerful value reading method, which supports simple expressions. Three-dimensional judgment. But there is a pitfall. In {}, single quotes \' should be used instead of double quotes\", otherwise it is super easy to make parsing errors.
Like { index || 10 }, { index > 10 ? 'Old man' : '小}, all can be supported

Supports referencing external tag definition files

[code]<script src="todo.tag" type="todo/tag"></script>

Copy after login

##The content and compilation of todo.tag can be written according to the above example.

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