riot.js入门--项目脚手架

dhso
2017/05/31 11:01
统计中

今天我们开始正式进入riot.js项目开发实战

html脚手架

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<title>DSDC前端框架</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="pragma" content="no-cache" />
		<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico">
		<link rel="stylesheet" type="text/css" href="/static/css/app.css?version={{ think.config('version') }}"/>
	</head>
	<body>
	<app-main></app-main>
	<script type="text/javascript" src="/static/lib/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/static/lib/riot/riot.compiler.min.js"></script>
	<script type="text/javascript" src="/static/js/app.js?version={{ think.config('version') }}"></script>
	<script type="riot/tag" src="/static/tag/app-main.tag?version={{ think.config('version') }}"></script>
</body>
</html>

app.js

/** 防止this污染 **/
var tag = this;
 
/** jquery观察者 **/ (function ($) {
    var o = $({}); //自定义事件对象
    $.each({
        trigger: 'publish',
        on: 'subscribe',
        off: 'unsubscribe'
    }, function (key, val) {
        jQuery[val] = function () {
            o[key].apply(o, arguments);
        };
    });
})(jQuery);
 
$(function () {
    /** riot 全局混合函数 **/
    riot.mixin({
        /** riot 观察者 **/
        observable: riot.observable(),
        /** mixin的其它方法... **/
        extend: function (des, src, override) {
            if (src instanceof Array) {
                for (var i = 0, len = src.length; i < len; i++)
                    this.extend(des, src[i], override);
            }
            for (var i in src) {
                if (override || !(i in des)) {
                    des[i] = src[i];
                }
            }
            return des;
        },
        isEmptyObject: function (e) {
            var t;
            for (t in e)
                return !1;
            return !0
        }
    });
 
    /** 挂载app-main.tag **/
    riot.mount('app-main');
 
    /** jquery的观察者使用 **/
    $.subscribe('toastr:show', function (e, arg = {
        type: 'success',
        title: '',
        message: ''
    }) {
        toastr[arg.type](arg.message, arg.title, {
            progressBar: true,
            closeButton: true
        });
    });
    $.publish('toastr:show', {
        type: 'success',
        title: '提醒',
        message: '系统升级成功!'
    });
 
    /** riot的观察者使用 **/
    tag.observable.on('metadata:table:reload', function () {
        $(tag.refs.metadataList).datagrid('reload');
    });
    tag.observable.trigger('metadata:table:reload');
});

metadata-list.tag

<metadata-list>
	<table ref="metadataList"></table>
	<div ref="metadataListButtons">
		<table>
            <tr>
                <td>
                    <input ref="searchBox" name="searchMetadata"></input>
                </td>
                <td>
                	<a ref="addButton">添加</a>
                </td>
                <td>
                	<a ref="updateButton">更新</a>
                </td>
                <td>
                	<a ref="deleteButton">删除</a>
                </td>
            </tr>
        </table>
	</div>
	<metadata-add if={show == 'add'}></metadata-add>
	<metadata-update if={show == 'update'}></metadata-update>

	<script>
		var tag = this;
		tag.on('before-mount', function(){
                        //挂载 add.tag
			riot.compile('/static/tag/metadata/add.tag', function() {
				riot.mount('metadata-add');
			});
			riot.compile('/static/tag/metadata/update.tag', function() {
				riot.mount('metadata-update');
			});
                        //注册 metadata:table:reload 观察者事件
			tag.observable.on('metadata:table:reload',function(){
				$(tag.refs.metadataList).datagrid('reload');
			});
		});

		tag.on('mount', function() {
			//$.parser.parse(tag.root);
			$(tag.refs.addButton).linkbutton({
			    iconCls: 'fa fa-plus icon',
			    plain:true,
			    onClick: function(){
			    	tag.show = 'add';
			    	tag.update();
			    }
			});
			$(tag.refs.updateButton).linkbutton({
			    iconCls: 'fa fa-edit icon',
			    plain:true,
			    disabled:true,
			    onClick: function(){
			    	tag.show = 'update';
			    	tag.update();
			    }
			});
			$(tag.refs.deleteButton).linkbutton({
			    iconCls: 'fa fa-remove icon',
			    plain:true,
			    disabled:true,
			    onClick: function(){
			    	$.ajax({
						type: 'POST',
						url: '/base/fetch',
						contentType: "application/json",
						dataType: "json",
						data: JSON.stringify({
							'_url': '/metadata/source/delete',
							'_withtoken': true,
							'ids': [tag.selectRow.id]
						}),
						success: function(res) {
							tag.observable.trigger('metadata:table:reload');
						}
					});
			    }
			});
			$(tag.refs.searchBox).searchbox({
			    searcher:function(value, name){
			        alert(value + "," + name)
			    },
			    prompt:'搜索'
			});
			$(tag.refs.metadataList).datagrid({
				url: '/base/fetch',
				queryParams: {
					'_url': '/metadata/source/list',
					'_withtoken': true
				},
				columns: [
					[{
						field: 'id',
						title: 'id',
						hidden: true
					}, {
						field: 'name',
						title: '系统名称',
						width:300
					}, {
						field: 'code',
						title: '系统代码',
						width:200
					}, {
						field: 'createdate',
						title: '创建日期',
						width:200
					}, {
						field: 'mtddesc',
						title: '备注',
						width:400
					}]
				],
				fitColumns: true,
				fit:true,
				border: false,
				singleSelect:true,
				pageSize: 20,
				pageList: [20, 40, 60],
				pagination: true,
				pagePosition: 'top',
				loadFilter: function(data) {
					return data.result;
				},
				onClickRow:function(index,row){
					$(tag.refs.updateButton).linkbutton('enable');
					$(tag.refs.deleteButton).linkbutton('enable');
					tag.selectRow = row;
				},
				onLoadSuccess:function(data){
					$(tag.refs.updateButton).linkbutton('disable');
					$(tag.refs.deleteButton).linkbutton('disable');
				}
			});
			$(tag.refs.metadataList).datagrid('getPager').pagination({
				displayMsg: '位置: {from} 到 {to} 行,共计 {total} 项',
				//layout: ['list', 'sep', 'first', 'prev', 'sep', 'links', 'sep', 'next', 'last', 'sep', 'refresh'],
				buttons: $(tag.refs.metadataListButtons)
			});
		});
	</script>
	<style>
		:scope{
			display: block;
			position: relative;
			height: 100%;
		}
	</style>
	
</metadata-list>

本文为 dhso 原创

发布在 http://blog.minws.com/riot-jsru-men-xiang-mu-jiao-shou-jia/

如有转载,请标明来源!

作者信息
姓名:dhso
热评文章
最新评论
文章概览