Riot.js:不足1K的MVP客户端框架(2)
2015-01-24 22:11 阅读(191)

自定义标签的属性和方法

可以为自定义的标签设置属性及方法。属性可以用于渲染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属性去掉来实现未选中的。