今天我们开始正式进入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>
评论 (0)