广州市天河区天河路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
是两个内置的变量,用于表示系统中当前所有已加载的页面,以及当前激活页面(位于最顶端的页面)