表达式
在riot.js中,html标签,可使用比较强大的表达式,来设值。
表达式可用在 innertext, attributes 中,而且100%原汁原味的javascript语法。
给几个小examples:
{ /*这里可以写表达式*/ }
使用方式也是蛮丰富的:
{ title || 'da宗熊' }
{ isReady ? 'ready' : 'loading' }
{ new Date() }
{ this.getName() }
{ Math.round(10) }
{ message.length > 100 && '消息太长了~' }riot.js的表达式,让你的html尽可能的整洁,高效。
当然如果你的表达式过于复杂,可以考虑把计算放在 update事件,或独立一个计算方法。
{ value }
{ this.getText(this.text) }
// 计算复杂的表达式 this.on("update", function(){ var d = new Date(); this.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); }); this.text = "da宗熊"; // getText方法,会依赖于this对象下 getText(text){ return "你好" + text; }
输出如下:

Boolean 属性
像checked, selected等属性,在roit.js中,就被称为Boolean属性。
如果Boolean属性的表达式值为false,那该属性将会被忽略:
将会生成:
W3C规范中说明,只要Boolean属性存在,那它就肯定是true,甚至将它的值甚至为false,但它仍然为true。
简单来说,就是就算我们设置了 checked=false,但最终浏览器出来的效果,还是被勾选状态。
针对这一点,roit.js对Boolean属性,在生成时,进行了优化,如果是Boolean属性,而且它的表达式的满足条件:
{ value == false }都将不会生成该Boolean属性。
新手遇坑
属性设置
这样的设置是禁止的,生成的,将会是这样的代码:
表示完全看不懂,有木有?
双引号
看着很正常啊,有木有?
但结果代码却是:
再次强调,riot.js就跟双引号有仇!!!!【大部分情况下】
以上就是riot.js学习【四】表达式+Boolean属性的内容,更多相关内容请关注PHP中文网(www.php.cn)!










