自定义标签的属性和方法
可以为自定义的标签设置属性及方法。属性可以用于渲染view,方法可用于业务处理。
例如:
var template = '<input value="{name}"><Button onclick="{ showName }">显示姓名</Button>'; riot.tag('person', template, function(opts) { this.name = opts.name; this.showName = function(e) { alert(this.name); }.bind(this); }) riot.mount('person', {name:'张三'});
为"person"标签添加了"name"属性,在将name用Riot表达式{name}渲染到view中。
同时为标签添加showName方法。
标签内的属性和方法需要通过this指向,this指代的是该自定义的标签实例对象本身
表达式
Riot的表达式是用大括号括起的任何javascript表达式或者是标签的方法名。表达式的结果用于渲染view,如果表达式内容是方法名称,则可为元素设置事件处理Handler,如上例的showName方法。例如:
{ title || 'Untitled' } { results ? 'ready' : 'loading' } { new Date() } { message.length > 140 && 'Message is too long' } { Math.round(rating) }对于radio、checkbox的选中、未选中状态,可以使用boolean类型的表达式。当值为true时,选中。当为false时,未选中。可以如下书写:
var template = '<input type="radio" __checked="{ isShow }"> <input type="checkbox" __checked="{ isShow }"'; riot.tag('person', template, function(opts) { this.isShow = false; })当属性isShow的值为true是, radio、checkbox俩个元素选中,否则不选中。
另外,俩点要注意
1. checked属性前需要加俩个下划线(_),否则无效
2. 当表达式的值为false时, Riot是通过将__checked属性去掉来实现未选中的。