riot.js學習【五】雜燴1
- 黄舟原創
- 2017-01-16 16:14:041013瀏覽
類簡寫
Riot提供了簡要的語法，生成類別名，例如：
[code]<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>只有true值，才會被生成，false值將會被忽略。產生的結果如下：
[code]<p class="foo baz zorro"></p>
當然咯，這個特性，你可以用在其它屬性上，如果你找到合適的地方的話~
給個坑爹的例子：
[code]<h1 xxx={a: true, b: 1}></h1>爹當然生成的，也是坑爹的：
[code]<h1 xxx="a b"></h1>
括號轉義
經過轉義後，可以輸出」{「和」}」。
[code]\{ 这里的表达式，将不会执行 \}將輸出：
[code]{ 这里的表达式，将不会执行 }自訂括號
我們可以自由的定義讀值的括號，就類似：
[code]riot.settings.brackets = '${ }'
riot.settings.brackets = '{{ }}'中間的空格，就是放置表達式值的地方
綁定的HTMLRiot的表達式，只能綁定除了HTML的文字值。但是，你可以透過自訂標籤，來綁定HTML內容。如：[code] <raw>
<span></span>
// 把这个标签的HTML，设为参数的content值
this.root.innerHTML = opts.content;
</raw>有了上面的自訂標籤後，你可以在其它標籤裡，鑲入HTML內容了：
[code] <todo>
<p>
这里有一些HTML的内容——
<raw content="{ html }"></raw>
</p>
this.html = '我叫:<strong>da宗熊</strong>';
</todo>You can see，todo標籤，鑲嵌了raw標籤。這是Riot裡一個非常有趣的東西。
嵌套的HTML
Riot裡，有個很重要的標籤，叫做
如，有一個標籤定義：
[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>有name或id的元素
如果自定义标签内，元素带有 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）！