-
Notifications
You must be signed in to change notification settings - Fork 26
Hex edited this page Jan 28, 2014
·
6 revisions
Transformers 框架的组件是组成系统最基本的部件。组件具有完全独立的功能，每个组件都包括独立的行为、展现和数据。
Transformers 的应用都是由一个一个的组件组合而成的，这很像积木玩具一样，每个组件就是一块积木，做出各种各样的积木就可以搭建起完整的系统了。
组件一般包含：
- 控制器
- 视图
- 数据
通过上面的讲解，我们了解到一个应用程序是由一个一个独立的组件组成的，那么，我们开发了一个又一个的组件，但是怎么把这些组件组装起来呢？在浏览器中如何呈现给用户呢？这就需要一个组件容器。
简单来讲，组件容器就是一个普通的 HTML 页面，这个页面可以是静态的 HTML 代码，也可以是由服务端生成的 HTML 页面。组件容器通常来说就是网站的首页（如 index.html）。
我们在组件容器中声明我们需要在这个容器中使用的所有组件，然后系统就会根据用户的设置自动的载入所有组件，当然你也可以声明某些组件只在使用的时候再载入。
下面我们就来看看一个实际的组件容器是什么样子的。
打开编辑器，创建一个名为 index.html 的文件，写入以下代码：
<!doctype html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<script src="http://javascript.u.qiniudn.com/qwrap/115.js"></script>
<script src="http://javascript.u.qiniudn.com/qwrap/transformers.js"></script>
</head>
<body>
<div id="content" class="TFComponent">
<div>
<!--
指定 tf-action-click 属性会给此元素绑定 click 事件
事件处理器是组件的 testAction 方法
-->
<button type="button" tf-action-click="test">测试</button>
</div>
<!-- content 模板的目标渲染节点 -->
<div class="TFTarget-content"></div>
<!-- 名为 content 的模板 -->
<script type="text/html" class="TFTemplate-content">
你好！世界！
</script>
</div>
<script type="text/javascript">
TF.Core.Application.create({
baseUrl: "./",
});
// 名为 Home 的组件
TF.Component.Home = TF.Core.ComponentMgr.create({
// 组件 DOM 准备就绪会调用 DomReady 方法
DomReady: function() {
console.log('ready!');
},
// Action 是组件对外的接口
testAction: function(args) {
console.log('test!');
// 渲染静态模板
this.sys.renderStaticTemplate('content');
this.renderOk();
},
// 组件私有方法，外部无法访问
renderOk: function() {
console.log('render OK!');
}
});
TF.Core.ComponentMgr.add([{
name: 'Home',
appendRender: false,
lazyRender: false,
hide: false,
applyTo: '#content'
}]);
TF.Ready = function(){
TF.Core.Application.bootstrap();
};
</script>
</body>
</html>