riot.js 学习【一】自定义标签-tutorial js-php.cn

riot.js 学习【一】自定义标签

黄舟

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

asal

1276 orang telah melayarinya

Riot.js最强大的功能，莫过于自定义标签，先来一段代码，看个效果:

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

Salin selepas log masuk

效果如下[每个1秒，times的值，就+1]：

说一下，新人会遇到的坑：

script type=”riot/tag”

compiler会遍历所有带有script type=”riot/tag” 的元素，如果script有src，则会加载外部的文件，如果没有src，则编译script里的内容。

PS: script中编写的内容，必须是空格或tab开头，如果直接跟着 “<”，是编译不出内容的。

这跟它内部的解析器有关【第一次还挺坑的…】

tick()

该函数的this对象，是当前的自定义标签的context，只要 xx(){} 这样声明的函数，context都被指定为标签的context

可通过this.tick访问 tick 函数

this.update

必须调用 this.update(); UI的内容才会更新。

可能会觉得没其它MV*的引擎自动化，但是，手动控制返回会更加灵活

opts

代码中，有个很奇怪的变量opts:

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

Salin selepas log masuk

其实它的值，就是 this.opts，是自定义标签传入的属性。
如：

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

Salin selepas log masuk

那 this.opts.start/opts.start 就等于 10
{ index }
riot.js强大的读值方法，它支持简单的表达式，三元判断。但是有一个坑，{}里，要用单引号\’代替双引号\”，不然超级容易解析出错。
像 { index || 10 }, { index > 10 ? ‘老头’ : ‘小屁孩’ }，都可以支持

支持引用外部标签定义文件

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

Salin selepas log masuk

todo.tag的内容和编译，按照上面例子编写即可。

以上就是riot.js 学习【一】自定义标签的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

riot.js 学习【一】自定义标签