Klassenabkürzung
Riot bietet eine einfache Syntax zum Generieren von Klassennamen, zum Beispiel:
[code]<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>
Nur wahre Werte werden generiert, falsche Werte werden ignoriert. Die generierten Ergebnisse lauten wie folgt:
[code]<p class="foo baz zorro"></p>
Natürlich können Sie diese Funktion auch für andere Attribute verwenden, wenn Sie einen geeigneten Ort finden~
Geben Sie mir ein Betrugsbeispiel:
[code]<h1 xxx={a: true, b: 1}></h1>
Natürlich wird es generiert, aber es ist auch ein Betrug:
[code]<h1 xxx="a b"></h1>
Klammer-Escape
Nach dem Escape können Sie „{“ und „ }" .
[code]\{ 这里的表达式,将不会执行 \}
gibt Folgendes aus:
[code]{ 这里的表达式,将不会执行 }
Benutzerdefinierte Klammern
Wir können Klammern für Lesewerte frei definieren, genau wie:
[code]riot.settings.brackets = '${ }' riot.settings.brackets = '{{ }}'
Im Leerzeichen in der Mitte wird der Ausdruckswert platziert
HTML ohne Escapezeichen binden
Der Ausdruck von Riot kann nur andere Textwerte als HTML binden. Sie können HTML-Inhalte jedoch über benutzerdefinierte Tags binden. Zum Beispiel:[code] <raw> <span></span> // 把这个标签的HTML,设为参数的content值 this.root.innerHTML = opts.content; </raw>
[code] <todo> <p> 这里有一些HTML的内容—— <raw content="{ html }"></raw> </p> this.html = '我叫:<strong>da宗熊</strong>'; </todo>
Sie können sehen, dass das Todo-Tag in das Raw-Tag eingebettet ist. Das ist eine sehr interessante Sache bei Riot.
Verschachteltes HTML
In Riot gibt es ein sehr wichtiges Tag namens
Zum Beispiel gibt es eine Tag-Definition:
[code] <my-tag> <!-- 这里使用了yield标签 --> <p>Hello <yield/></p> this.text = 'world' </my-tag>
[code] <my-tag> <!-- 这部分内容,会替换掉<yield />标签 --> <b>{ text }</b> </my-tag>
[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>
[code]<form onsubmit={ condition ? mA : mB}></form>
当然,我们可以在事件处理函数中,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)!