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

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

2017-05-31 / 0 评论 / 40 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月27日,已超过209天没有更新,若内容或图片失效,请留言反馈。

今天我们开始正式进入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

评论 (0)

取消