riot.js学习【五】杂烩1
来源:互联网 发布:湖南教师网络研修 编辑:程序博客网 时间:2024/05/11 16:13
类简写
Riot提供了简要的语法,生成类名,例如:
<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>
只有true值,才会被生成,false值将会被忽略。生成的结果如下:
<p class="foo baz zorro"></p>
当然咯,这个特性,你可以用在其它属性上,如果你找到合适的地方的话~
给个坑爹的例子:
<h1 xxx={a: true, b: 1}></h1>
当然生成的,也是坑爹的:
<h1 xxx="a b"></h1>
括号转义
经过转义后,可以输出”{“和”}”。
\{ 这里的表达式,将不会执行 \}
将输出:
{ 这里的表达式,将不会执行 }
自定义括号
我们可以自由的定义读值的 括号,就类似:
riot.settings.brackets = '${ }'riot.settings.brackets = '{{ }}'
中间的空格,就是放置表达式值的地方
绑定未转义的HTML
Riot的表达式,只能绑定除了HTML的文本值。但是,你可以通过自定义标签,来绑定HTML内容。如:
<raw> <span></span> // 把这个标签的HTML,设为参数的content值 this.root.innerHTML = opts.content; </raw>
有了上面的自定义标签后,你可以在其它标签里,镶入HTML内容了:
<todo> <p> 这里有一些HTML的内容—— <raw content="{ html }"></raw> </p> this.html = '我叫:<strong>da宗熊</strong>'; </todo>
You can see,todo标签,镶嵌了raw标签。这是Riot里一个非常有趣的东西。
嵌套的HTML
Riot里,有个很重要的标签,叫 <yield />
它能把使用中标签内嵌的HTML,放在标签定义内部。
如,有一个标签定义:
<my-tag> <!-- 这里使用了yield标签 --> <p>Hello <yield/></p> this.text = 'world' </my-tag>
如果这样使用:
<my-tag> <!-- 这部分内容,会替换掉<yield />标签 --> <b>{ text }</b> </my-tag>
得出的结果如下:
<my-tag> <p>Hello <b>world</b></p></my-tag>
有name或id的元素
如果自定义标签内,元素带有 id 或 name ,这些元素,会自动绑定到标签内容的 context 上,我们可以很简单的通过javascript,获取到这些元素进行操作:
<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内使用,例如:
<div>{ username.value }</div>
事件处理
Riot标签的事件定义,可以通过简单的方式进行绑定:
<login> <form onsubmit={ submit }></form> // 表单的提交,会运行下面的submit方法 submit(e) { } </login>
如果属性以“on”开头,例如: onclick, onsubmit, oninput等等,它们都接受一个函数,来处理对应的事件。
这种函数,甚至可以根据表达式的值,动态的进行绑定:
<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
- riot.js学习【六】杂烩2
- riot.js学习【二】mixin
- riot.js学习【三】事件
- riot.js学习【八】观察者
- riot.js学习【九】路由
- riot.js 学习【一】自定义标签
- riot.js学习【四】表达式+Boolean属性
- riot.js学习【七】脚本创建标签
- 初识riot.js
- Riot视频学习
- js,jq知识杂烩
- Node.js基础知识杂烩
- 编程学习杂烩
- 杂烩[1]
- 杂烩
- 杂烩
- 杂烩
- 基于链表实现Java 自定义Stack栈
- JNI学习笔记
- 修改jenkins的默认端口
- softirq/tasklet/workqueue的区别
- 【心情】菜鸟学习的一些心路历程。
- riot.js学习【五】杂烩1
- java.lang.IllegalStateException: Can't change tag of fragment
- 使用Acronis Disk Director Suite进行系统盘扩容
- “堆”和“栈”的粗略认知
- CString时间字符串,COleDateTime,CTime类之间的转换
- 怎么发现RAC环境中'library cache pin'等待事件的阻塞者(Blocker)?
- Fragment与ViewPager之间更新数据相关问题
- 马云——2015纽约经济俱乐部演讲全文
- FIQ和IRQ的区别及CPU实现