快速开始

引入 QWrap 框架

<script src="http://javascript.u.qiniudn.com/qwrap/115.js"></script>

引入 Transformers 框架

<script src="transformers.js"></script>

开始使用

1. 创建应用程序

// 创建应用程序
TF.Core.Application.create({
    baseUrl: "./",
});

2. 创建组件 Home

// 定义名为 Home 的组件
TF.Component.Home = TF.Core.ComponentMgr.create({
    // 组件 DOM 准备完毕回调函数
    DomReady: function() {
        // 定义组件 Layout
        // 不同 Layout 可以让组件获取不同的能力
        this.sys.createNormalLayout({
            // 组件主模板的模板名
            'name': 'listing',
            // 定义组件主处理函数
            'fn': this.refresh
        });
    },

    // 系统消息 Route Before 处理函数
    // 表示在消息处理之前执行的操作
    componentRouteActionBefore: function(args) {
        // TODO
    },

    // 组件主处理函数
    refresh: function() {
        if (this.sys.isHidden()) {
            return;
        }
    }
});

3. 创建路由

// 创建路由，默认路由到名为 Home 的组件
TF.Core.Router.create('Home');

4. 注册组件

// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
    name: 'Home',
    appendRender: false,
    lazyRender: false,
    hide: false,
    renderTo: '#content'
}]);

5. 启动应用程序

// 等待 DOM Ready
TF.Ready = function(){
    // 启动应用程序
    TF.Core.Application.bootstrap();
};

实例

<script src="http://javascript.u.qiniudn.com/qwrap/115.js"></script>
<script src="transformers.js"></script>

<script>
// 创建应用程序
TF.Core.Application.create({
    baseUrl: "./",
});

// 定义名为 Home 的组件
TF.Component.Home = TF.Core.ComponentMgr.create({
    // 组件 DOM 准备完毕回调函数
    DomReady: function() {
        // 定义组件 Layout
        // 不同 Layout 可以让组件获取不同的能力
        this.sys.createNormalLayout({
            // 组件主模板的模板名
            'name': 'listing',
            // 定义组件主处理函数
            'fn': this.refresh
        });
    },

    // 系统消息 Route Before 处理函数
    // 表示在消息处理之前执行的操作
    componentRouteActionBefore: function(args) {
        // TODO
    },

    // 组件主处理函数
    refresh: function() {
        if (this.sys.isHidden()) {
            return;
        }
    }
});

// 创建路由，默认路由到名为 Home 的组件
TF.Core.Router.create('Home');

// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
    name: 'Home',
    appendRender: false,
    lazyRender: false,
    hide: false,
    renderTo: '#content'
}]);

// 等待 DOM Ready
TF.Ready = function(){
    // 启动应用程序
    TF.Core.Application.bootstrap();
};
</script>