文档库
文档库 最新最全的文档下载
当前位置：文档库 › 使用APICloud从1开始写玩转晋城-二首页main部分

使用APICloud从1开始写玩转晋城-二首页main部分

使用APICloud从1开始写玩转晋城-二首页main部分
使用APICloud从1开始写玩转晋城-二首页main部分

本帖最后由老邮局于2014-12-1 20:09 编辑

上一篇我们说道底部导航栏中的openTab()，用于打开不同的header和main，这里我

1、首页中的main可以分为三个部分：幻灯片(红色)、常用分类(蓝色)、活动分类(绿色

2、蓝色部分界面是固定的，我们使用本地图片写死在程序里面

3、红色和绿色部分，我们希望可以根据服务器内容实时的更新。

首先蓝色部分我们按下不表，“脉脉”中已经表过啦；我们的主要精力放在幻灯片部分。

红色部分（幻灯片）：

简要描述下数据调用过程：

1、连接服务器，查询数据库并返回

当首次初始化此页面，会调用getData(), 函数会链接到服务器，查询数据库中的由于数据是动态的，所以html中我们就不能写死，要用变量代替,以便数据进行替换。main.js

1.40 function getData(){

2.41 api.showProgress({

3.42 title:'加载中',

4.43 model:false

5.44 });

6.45

7.46 var model = api.require('model'); //

8.47 var query = api.require('query');

9.48

10.49 model.config({

11.50 appKey:'02***07C-****-C2FF-****-F816****D17A', //appKey，apiclou

12.51 host:'https://https://www.wendangku.net/doc/065184284.html,'

13.52 });

14.53 query.createQuery(function(ret,err){

15.54 if (ret && ret.qid){ //

16.55 var queryId = ret.qid;

17.56 model.findAll({class:"activity",qid:queryId},function(ret,err){// 查询表activity

18.57 if (ret){

19.58 var content = $api.byId('act-content'); // 获取幻灯

20.59 var tpl = $api.byId('act-template').text; // 获取模板译，后面会说

21.60 var tempFn = doT.template(tpl); // 根据模一个匿名函数

22.61 content.innerHTML = tempFn(ret); // 根据实

23.62

24.63 api.hideProgress();

25.64 }else{

26.65 //error

27.66 }

28.67 });

29.68 }

30.69 });

31.70 }

getData()完成了连接服务器数据库，查询数据并返回。就固定这么写的，几个api调用行18中，ret变量就是查询后服务器返回的数据：

一个标准json格式的对象数组

2、经模板引擎生成静态html内容

第一步中，服务器返回了数据ret，紧接着交给模板引擎进行渲染(行58-61)，就的格式化输出。

(我们引用的是第三方的模板引擎doT.js)

main.html

1.14

我们先看下模板怎么定义的

main.html

1.15

9.23

10.24

12.26

    13.27

    • 14.28

    • 15.29

    • 16.30

17.31

复制代码

行15-22定义模板，前面提到的getData()会将返回的json数据传递给模板引擎，然后根

生成对应数量的div。

行24是幻灯片的div，上一步生成的div全部要放到这个div容器中。

还是云里雾里的哈，我们看看模板引擎到底是如何使用和工作(行58-61)：

1、在html中定义模板引擎，包括模板(行15-21)、用于显示模板的容器(行24)

2、在js中，找到用于显示模板的容器，然后将模板编译的内容塞进容器中。main.js

1.58 var content = $api.byId('act-content'); // 找到用于显示模板的容器

2.59 var tpl = $api.byId('act-template').text; // 找到模板变量

3.60 var tempFn = doT.template(tpl); // 进行模板的编译(生成匿名函数，用于处理生成

4.61 content.innerHtml = tempFn(ret); // 根据所给数据组装成静态的html

复制代码

(行60) , 进行模板编译，将会生成如下函数：

1.function anonymous(it) {

2. var out='';

3. for(var i=0; i

4.out+='

相关文档
相关文档 最新文档

侵权投诉  © 2013-2023 www.wendangku.net  站点地图 | 手机版

闽ICP备11023808号-7  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈