Home > Article > Web Front-end > riot.js learning [6] Chowder 2

riot.js learning [6] Chowder 2

黄舟Original: 2017-01-16 16:17:281227browse

Building method

Riot defaults to building DOM content through "custom tags", but you can also specify which "custom tag" to use to build DOM through the attribute "riot-tag".

For example:

[code]    <div riot-tag="todo" title="da宗熊"></div>
    等同于:
    <todo title="da宗熊"></todo>

Alternatively, you can also specify the built elements in riot.mount:

[code]<div id="content"></div>
<script>
    // 给id="content"的元素，构建todo的内容
    // 第一个参数，可以是dom元素,too
    riot.mount("#content", "todo");
</script>

Style

Customize the label in Riot , you can use the style tag to write styles for components. Riot will insert all style content into the head tag, so there is no need to worry about styles being defined repeatedly.

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

</body>

<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
    <todo>
        <label>da宗熊</label>
        <!-- 自定义样式 -->
        <style>
            label{color:#ccc;}
        </style>
    </todo>
</script>

<script type="text/javascript">
    riot.mount("todo");
</script>
</html>

Final generation:

riot.js learning [6] Chowder 2

Although the todo tag was called twice, only one style was finally generated.

each loop

To implement lists like ul and ol, looping is absolutely necessary. Riot has built-in each attribute, which is used to loop to generate the content of "class list" [We are not just You can traverse lists and even objects].

[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>
        <!-- 遍历列表 -->
        <ul each={ item in list }>
            <li>{ item }</li>
        </ul>
        <!-- 遍历对象 -->
        <ul each={ key,value in obj }>
            <li>{ key }:{ value }</li>
        </ul>
        // 列表内容
        this.list = [
            "内容1",
            "内容2",
            "内容3"
        ];
        // 对象内容
        this.obj = {
            name: "da宗熊",
            age: 26
        };
    </todo>
</script>

<script type="text/javascript">
    riot.mount("todo");
</script>
</html>

is generated as follows:

riot.js learning [6] Chowder 2

If the content of the list is an object, Riot also provides a quick access method:

[code]<script type="riot/tag">
    <todo>
        <ul each={ list }>
            <!-- 这里的 context 已经是 list
 咧 -->
            <li>{ title }</li>
        </ul>
        // 列表内容
        this.list = [
            {title: "第一个"},
            {title: "第二个"}
        ];
    </todo>
</script>

Result As follows:

riot.js learning [6] Chowder 2

It can be seen that the context [this object] in the bracket expression [{ expression }] is no longer the context of the label, but has become the current traversal object of the current item.

If we need to access the context of the label in the each loop, we can access it through the "parent" keyword.

For example:

[code]<script type="riot/tag">
    <todo>
        <ul each={ items }>
            <li>
                <span>{ title }</span>
                <a onclick={ parent.remove }>删除</a>
            </li>
        </ul>

        this.items = [{title: "da宗熊"}];
        remove(e){
            // 获取到当前点击, each循环中的item
            // 这里就是获取到了 {title: "da宗熊"} 这个对象
            var item = e.item;
            var index = this.items.indexOf(item);
            // 把当前项删掉
            // 数组的slice，push等操作，自带了this.update操作，SO，这里省了this.update调用
            this.items.splice(index, 1);
        }
    </todo>
</script>

In the event object, you can access the current object in the current each loop through event.item.

The above is the content of riot.js learning [6] Chowder 2. 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 [5] Chowder 1Next article：riot.js learning [5] Chowder 1

See more

riot.js learning [6] Chowder 2

Related articles