riot.js apprentissage [1] Balises personnalisées-js tutoriel-php.cn

riot.js apprentissage [1] Balises personnalisées

黄舟

Libérer： 2017-01-16 15:59:44

original

1276 Les gens l'ont consulté

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>

Copier après la connexion

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 "<", le contenu ne sera pas compilé.

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;

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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)