广州市天河区天河路621号天娱广场西塔10楼
EAIC前端mvvm框架
一个页面包含三部分，分别是：
- 页面模板(html代码)
- 页面样式定义(css)
- 页面逻辑(js代码)
ebfui将页面的三部分整合在一个.eui文件中，避免了源码文件过多的问题。一个 .eui文件的结构如下：
<script>
$.vm({
data:{
//这里是数据定义
},
event:{
onLoad:function () {
}
}
});
</script>
<style>
//这里是页面样式定义
</style>
<page-template>
//这里是页面的html结构
</page-template>
引导页
页面不可直接运行，需要一个引导页面，也就是传统的html页面来加载ebfui的mvvm引擎。
制作引导页跟传统网页一样，只需要添加一点代码来启动ebfui mvvm引擎。
以下是一个样板引导页
<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh-CN" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="zh-CN" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/ebfui/font/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="/tpl/theme/default/css/eui.css" rel="stylesheet" type="text/css"/>
<script src="/ebfui/js/eui.min.js" type="text/javascript"></script>
<!--[if lt IE 10]>
<script src="/ebfui/vendor/history.min.js" type="text/javascript"></script>
<script src="/ebfui/vendor/promise.min.js" type="text/javascript"></script>
<![endif]-->
</head>
<body >
<div id="frame" >
</div>
<script type="text/javascript">
$.setConfig({
'debug' : 0,
});
$.run("#frame","/framePage");
</script>
</body>
</html>
注意示例代码中的标红部分，引导页需要一个div元素来占位，该位置将是第一个ebfui页面所在位置，并且需要一行代码来打开第一个ebfui页面，这个页面就是主框架页面
主框架页面
主框架页面就是ebfui的第一个页面，它负责管理所有的其它页面，它是真正的ebfui页面，而引导页仍然是传统的WEB页面。
以下是一个主框架页面的样板代码
<script>
$.vm({
data:{
},
event:{
}
},true);
</script>
<style>
.win-page {
background-color: rgb(245, 245, 245);
padding: 15px;
overflow:auto;
}
</style>
<page-template>
<eui-page path="/ebfcontrol/common/dialog/index"/>
<eui-page path="/ebfcontrol/common/toast/index"/>
<div class="page-wraper">
<each cond="$wins" item="win" index="index">
<div class="width-full height-full win-page ${ index == $activeWin ? '':'is-hidden'}">
<eui-page path="${win.view}" datas="${win.datas}" />
</div>
</each>
</div>
</page-template>
$.vm函数第二个参数需设置为
true，表明此页面是主框架页面，其它页面不需要传此参数。
$wins和$activeWin是两个内置的变量，用于表示系统中当前所有已加载的页面，以及当前激活页面(位于最顶端的页面)
