riot.js apprenant [7] Script pour créer des balises

Créer des balises

Dans Riot, nous créons des balises personnalisées via du code html, mais en fait, la balise personnalisée exécutable finale sera compilée dans un script.

En fait, un morceau de code de balise personnalisé comme ceci :

<script type="riot/tag">
    <todo>        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";    </todo></script>

Après compilation, il deviendra un script véritablement exécutable, comme ceci :

riot.tag(&#39;todo&#39;, &#39;<h1>{ title }</h1>&#39;, function(opts) {

    this.title = opts.title || "da宗熊";

});

riot.tag a trois paramètres obligatoires :

riot.tag('标签名', '模版内容', 初始化函数);

Il existe deux paramètres facultatifs, à savoir le style et les attributs :

riot.tag('标签名', '模版内容', '样式', fn);
或:riot.tag('标签名', '模版内容', '属性', fn);
或:riot.tag('标签名', '模版内容', '样式', '属性', fn);

Style :

Le contenu du style sera placé dans une balise de style dans la tête.
Ainsi, l'écriture correcte du style est la suivante :

riot.tag(&#39;todo&#39;, &#39;<p class="title">{opts.title}</p>&#39;, &#39;.title{color:#ff0;}&#39;, function(opts){
    // todo something});

Le style doit écrire le sélecteur complété et le style associé.

Attribut : le contenu de l'attribut

sera finalement reflété dans context.opts. La façon correcte d'écrire l'attribut est la suivante :

riot.tag(&#39;todo&#39;, &#39;<p>{ opts.title }</p>&#39;, &#39;title="da宗熊" age="26"&#39;, function(opts){
    // todo something});

Rencontre de débutants. pièges

Le site officiel dit que les expressions d'attribut doivent être entre guillemets, telles que : value=”{ val }” au lieu de value={ val } [MAIS, personnellement testé la version 2.1, il n'y a pas de différence, quelqu'un peut-il l'expliquer ? 】

Attribut booléen : __checked="{ isTrue }" au lieu de vérifié={ isTrue }【C'est un must absolu ! 】

Il est préférable d'écrire le src de la balise img sous la forme riot-src pour éviter les requêtes erronées

Utilisez le style riot au lieu du style, afin d'être compatible avec ie