riot写一个timeline标签

riot写timeline标签步骤

1. 写timeline的显示html;
2. 写javascript,对一些参数进行处理和一些事件进行处理；

<div class="timeline-centered timeline-sm">
        <article class="timeline-entry {i%2!=0?'left-aligned':''}" each={item,i in items}>
	        <div class="timeline-entry-inner " >
	            <time class="timeline-time" datetime="{item.datetime}"><span>{new Date(item.datetime).format("hh:mm:ss")||'time missing'}</span><span>{new Date(item.datetime).format("MM/dd/yyyy")||'date missing'}</span></time>
	            <div class="timeline-icon {item.iconcolor||'bg-violet'}"><i class="{item.icon||'fa fa-exclamation'}"></i></div>
	            <div class="timeline-label {item.background}"><h4 class="timeline-title">{item.title||'Title missing'}</h4>
	                <p><raw content="{item.description||'description missing'}"</p>
	           	</div>
	        </div>
	         <div class="timeline-entry-inner" if={i==items.length-1}>
	            <div class="timeline-icon" style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);" if={!editable}><i class="fa fa-circle"></i></div>
	            <div class="timeline-icon" style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);" if={editable}><a href="#" οnclick="{add}"><i class="fa fa fa-plus"></i></a></div>
	        </div>
	    </article>    
	</div>

<script>
    	 this.items=opts.items;   
    	 this.editable=opts.editable;
    	 if(!this.items||this.items.length==0){
    	 	this.items=[{
    	 		datetime:"2016-4-1 11:32:20",
    	 		icon:"fa fa-exclamation",
    	 		iconcolor:"bg-violet",
    	 		background:"",
    	 		title:"Start Project",
    	 		description:"Project description here..."
    	 	},
    	 	{
    	 		datetime:"2016-7-12 1:32:20",
    	 		icon:"fa fa-group",
    	 		iconcolor:"bg-green",
    	 		background:"bg-green",
    	 		title:"Job Meeting",
    	 		description:"Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette."
    	 	},
    	 	{
    	 		datetime:new Date(),
    	 		icon:"fa fa-paper-plane",
    	 		iconcolor:"bg-orange",
    	 		background:"bg-orange",
    	 		title:"Daily Feeds",
    	 		description:'<img class="timeline-img pull-left" alt="" src="http://lorempixel.com/45/45/nature/3/">Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.'
    	 	}
    	 	];
    	 }
    	 
    	 add(){
    	 	opts.trigger("add");
    	 }
    	 
    	 Date.prototype.format = function(format) {
			var o = {
				"M+" : this.getMonth() + 1, // month
				"d+" : this.getDate(), // day
				"h+" : this.getHours(), // hour
				"m+" : this.getMinutes(), // minute
				"s+" : this.getSeconds(), // second
				"q+" : Math.floor((this.getMonth() + 3) / 3), // quarter
				"S" : this.getMilliseconds()
			// millisecond
			};
			if (/(y+)/.test(format))
				format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for ( var k in o)
				if (new RegExp("(" + k + ")").test(format))
					format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]	: ("00" + o[k]).substr(("" + o[k]).length));
			return format;
		};
    </script>

页面中调用，直接引入标签即可：

<timeline></timeline>

riot整个生命周期：

• 加载  riot.mount('timeline');
  
• 渲染 riot.render('')
  
• 更新  riot.update()
• 卸载 riot.unmount()

<script type="riot/tag" src="./timeline.tag"></script>		
		<script>
		$(document).ready(function(){
			var param={editable:true};
			param.items=[{
    	 		datetime:"2016-4-1 11:32:20",
    	 		icon:"",
    	 		iconcolor:"",
    	 		background:"",
    	 		title:"Start Project",
    	 		description:"Project description here..."
    	 	},
    	 	{
    	 		datetime:"2016-7-12 1:32:20",
    	 		icon:"fa fa-group",
    	 		iconcolor:"bg-green",
    	 		background:"bg-green",
    	 		title:"Job Meeting",
    	 		description:"Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette."
    	 	},
				{
					datetime:"2016-10-01 10:30:30",
					icon:"fa fa-group",
					iconcolor:"bg-red",
					background:"bg-red",
					title:"traveling",
					description:"traveling in wuhan with many friends."
				},
    	 	];
			riot.observable(param);
			riot.mount("*",param);	
			param.on("add",function(){
				var addItem = {
					datetime:new Date(),
					icon:"fa fa-paper-plane",
					iconcolor:"bg-orange",
					background:"bg-orange",
					title:"Daily Feeds",
					description:'<img class="timeline-img pull-left" alt="" src="http://lorempixel.com/45/45/nature/3/">Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.'
				};
				param.items.push(addItem);
			})
			
		});
			
		</script>