Heim > Artikel > Web-Frontend > riot.js lernt [6] Chowder 2

riot.js lernt [6] Chowder 2

黄舟Original: 2017-01-16 16:17:281240Durchsuche

Erstellungsmethode

Riot erstellt DOM-Inhalte standardmäßig über „benutzerdefinierte Tags“. Sie können jedoch auch über das Attribut „riot-tag“ angeben, welches „benutzerdefinierte Tag“ zum Erstellen von DOM verwendet werden soll.

Zum Beispiel:

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

Oder Sie können die gebauten Elemente auch in riot.mount angeben:

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

Style

in In Benutzerdefinierte Riot-Tags: Mit dem Style-Tag können Sie Stile für Komponenten schreiben. Riot fügt den gesamten Stilinhalt in das Head-Tag ein, sodass Sie sich keine Sorgen darüber machen müssen, dass Stile wiederholt definiert werden.

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

Endgültige Generierung:

riot.js lernt [6] Chowder 2

Obwohl das Todo-Tag zweimal aufgerufen wurde, wurde letztendlich nur ein Stil generiert.

each-Schleife

Um Listen wie ul und ol zu implementieren, ist eine Schleife unbedingt erforderlich. Riot verfügt über ein integriertes every-Attribut, mit dem eine Schleife erstellt wird, um den Inhalt „listenartig“ zu generieren „[Wir sind nicht nur Sie können Listen und sogar Objekte durchlaufen].

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

wird wie folgt generiert:

riot.js lernt [6] Chowder 2

Wenn der Inhalt der Liste ein Objekt ist, bietet Riot auch eine Schnellzugriffsmethode an:

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

Die Ergebnisse sind wie folgt:

riot.js lernt [6] Chowder 2

Es ist ersichtlich, dass der Kontext [dieses Objekt] im Klammerausdruck [{ Ausdruck }] nicht mehr vorhanden ist Der Kontext des Etiketts wird jedoch zum aktuellen Element des aktuell durchlaufenen Objekts.

Wenn wir in jeder Schleife auf den Kontext des Tags zugreifen müssen, können wir über das Schlüsselwort „parent“ darauf zugreifen.

Zum Beispiel:

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

Im Ereignisobjekt können Sie über event.item auf das aktuelle Objekt in der aktuellen Schleife zugreifen.

Das Obige ist der Inhalt von riot.js, der [6] Chowder 2 lernt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：riot.js lernt [5] Chowder 1Nächster Artikel：riot.js lernt [5] Chowder 1

In Verbindung stehende Artikel

Mehr sehen