riot.js apprentissage [5] Chaudrée 1

Abréviation de classe

Riot fournit une syntaxe simple pour générer des noms de classe, par exemple :

[code]<p class={ foo: true, bar: 0, baz: new Date(), zorro: &#39;a value&#39; }></p>

Seules les vraies valeurs seront générées, les fausses valeurs seront ignorées. Les résultats générés sont les suivants :

[code]<p class="foo baz zorro"></p>

Bien sûr, vous pouvez utiliser cette fonctionnalité sur d'autres attributs, si vous trouvez un endroit approprié~

Donnez-moi un exemple de triche :

[code]<h1 xxx={a: true, b: 1}></h1>

Bien sûr, il est généré, mais c'est aussi une arnaque :

[code]<h1 xxx="a b"></h1>

Échappement de support

Après vous être échappé, vous pouvez afficher "{" et " }" .

[code]\{ 这里的表达式，将不会执行 \}

affichera :

[code]{ 这里的表达式，将不会执行 }

Parenthèses personnalisées

Nous pouvons définir librement des parenthèses pour lire les valeurs, tout comme :

[code]riot.settings.brackets = '${ }'
riot.settings.brackets = '{{ }}'

L'espace au milieu est l'endroit où la valeur de l'expression est placée

Lier le HTML sans échappement

L'expression de Riot ne peut lier que des valeurs de texte autres que HTML. Cependant, vous pouvez lier du contenu HTML via des balises personnalisées. Par exemple :

[code]    <raw>
        <span></span>

        // 把这个标签的HTML，设为参数的content值
        this.root.innerHTML = opts.content;
    </raw>

Avec les balises personnalisées ci-dessus, vous pouvez intégrer du contenu HTML dans d'autres balises :

[code]    <todo>
        <p>
            这里有一些HTML的内容——
            <raw content="{ html }"></raw>
        </p>

        this.html = &#39;我叫:<strong>da宗熊</strong>&#39;;
    </todo>

Vous pouvez voir que la balise todo est intégrée à la balise raw. C'est une chose très intéressante dans Riot.

HTML imbriqué

Dans Riot, il y a une balise très importante appelée >Il peut utiliser le code HTML intégré dans la balise dans la définition de la balise.

Par exemple, il existe une définition de balise :

Si elle est utilisée comme ceci :

[code]    <my-tag>
        <!-- 这里使用了yield标签 -->
        <p>Hello <yield/></p>
        this.text = &#39;world&#39;
    </my-tag>

Le résultat est comme suit :

[code]    <my-tag>
        <!-- 这部分内容，会替换掉<yield />标签 -->
        <b>{ text }</b>
    </my-tag>

Élément avec nom ou identifiant

[code]<my-tag>
    <p>Hello <b>world</b></p>
</my-tag>

如果自定义标签内，元素带有 id 或 name ，这些元素，会自动绑定到标签内容的 context 上，我们可以很简单的通过javascript，获取到这些元素进行操作：

[code]    <login>
        <form id="login" onsubmit={ submit }>
            <input name="username">
            <input name="password">
            <button name="submit">
        </form>

        // 上面的元素，已经绑定到this对象中了
        var form = this.login,
            username = this.username.value,
            password = this.password.value,
            button = this.submit

    </login>

当然咯，这些带有 name 或 id 的元素，也可以在标签的HTML内使用，例如：

[code]<div>{ username.value }</div>

事件处理

Riot标签的事件定义，可以通过简单的方式进行绑定:

[code]    <login>
        <form onsubmit={ submit }></form>

        // 表单的提交，会运行下面的submit方法
        submit(e) {

        }
    </login>

如果属性以“on”开头，例如： onclick, onsubmit, oninput等等，它们都接受一个函数，来处理对应的事件。

这种函数，甚至可以根据表达式的值，动态的进行绑定:

[code]<form onsubmit={ condition ? mA : mB}></form>

如果条件成立，onsubmit执行mA，否则执行mB。

在Roit中，绑定的所有事件处理的函数，它们的默认事件，都被自动取消掉，除非你绑定的元素，是checkbox或者radio。

这意味着， e.preventDefault() 已经替你自动执行了，因为我们经常那么干~，so，Riot已经帮我们自动取消了默认事件。

当然，我们可以在事件处理函数中，return true；来让默认事件正常触发。

Event对象

在所有的事件处理函数中，第一个参数，就是event对象。每个event对象，含有下面几个属性：

e.currentTarget 指向事件触发的那个元素

e.target 事件起源的元素，呃，跟e.currentTarget一样

e.which 键盘事件中的按键值【key code】

e.item 当前each循环中，元素绑定的this对象

以上就是riot.js学习【五】杂烩1的内容，更多相关内容请关注PHP中文网（www.php.cn）！