Maison > Article > interface Web > riot.js apprentissage [1] Balises personnalisées

riot.js apprentissage [1] Balises personnalisées

黄舟original: 2017-01-16 15:59:441265parcourir

La fonction la plus puissante de Riot.js est celle des balises personnalisées. Tout d'abord, prenons un morceau de code pour voir l'effet :

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

L'effet est le suivant [pour chaque seconde, la valeur. des fois est 1 ] :

riot.js apprentissage [1] Balises personnalisées

Parlons des pièges que les nouveaux arrivants rencontreront :

script type="riot/tag"

Le compilateur parcourra tous les éléments avec script type="riot/tag". Si le script a src, il chargera le fichier externe. S'il n'y a pas de src, il compilera le contenu du script.

PS : Le contenu écrit dans le script doit commencer par un espace ou une tabulation. S'il est directement suivi de "
Ceci est lié à son analyseur interne [C'était assez déroutant la première fois...]

tick()

L'objet this de cette fonction est la personnalisation actuelle Le contexte de l'étiquette, tant que la fonction est déclarée comme xx(){}, le contexte est spécifié comme le contexte de l'étiquette

La fonction tick est accessible via this.tick

this.update

This.update(); doit être appelé avant que le contenu de l'interface utilisateur ne soit mis à jour.

Vous aurez peut-être l'impression qu'il n'y a pas d'autre automatisme moteur MV*, mais le contrôle manuel du retour sera plus flexible

opts

Dans le code, il y a un très étrange variable opts :

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

En fait, sa valeur est this.opts, qui est l'attribut transmis par la balise personnalisée.
Par exemple :

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

Alors this.opts.start/opts.start est égal à 10
{ index }
riot.js est une méthode de lecture de valeur puissante qui prend en charge des expressions Formule, jugement ternaire. Mais il y a un piège. Dans {}, vous devez utiliser des guillemets simples " au lieu de guillemets doubles ", sinon il est très facile de faire des erreurs d'analyse.
Comme { index || 10 }, { index > 10 ? 'vieil homme' : 'petit enfant' }, peut prendre en charge

et prendre en charge le référencement de fichiers de définition de balises externes

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

Le contenu et la compilation de todo.tag peuvent être écrits selon l'exemple ci-dessus

Ce qui précède est le contenu de. riot.js learning [1] Balises personnalisées, plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Encapsulation de la fonction d'assouplissement dans le graphique carrousel JSArticle suivant：Encapsulation de la fonction d'assouplissement dans le graphique carrousel JS

Articles Liés

Voir plus