riot.js lernt [6] Chowder 2-js-Tutorial-php.cn

riot.js lernt [6] Chowder 2

黄舟

Freigeben： 2017-01-16 16:17:28

Original

1194 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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