Home > Article > Web Front-end > riot.js learning [1] Custom tags

riot.js learning [1] Custom tags

黄舟Original: 2017-01-16 15:59:441225browse

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>

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

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

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

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>

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

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：Encapsulation of easing function in JS carousel chartNext article：Encapsulation of easing function in JS carousel chart

See more

riot.js learning [1] Custom tags

Related articles