Clouda API使用手冊(cè)之View Transition Controller
View
View使用handlebars組件作為模板引擎，handlebars語(yǔ)法請(qǐng)參考官網(wǎng)。
為了更快的開(kāi)發(fā)視圖代碼，Clouda對(duì)handlebars的語(yǔ)法做了一些擴(kuò)展：
-
view中引入view
語(yǔ)法： {{> viewName}}在一個(gè)View中引用另一個(gè)View。
-
view中使用JS
語(yǔ)法： {{$ alert("data.length"); }}在View中直接執(zhí)行Javascript代碼，并將返回結(jié)果輸出在View中。
-
foreach
用于快速遍歷一個(gè)對(duì)象或數(shù)組
語(yǔ)法：{{#foreach}}{{/foreach}}用法示例：
- <p id="test-foreach-caseB">
- {{#foreach customObj}}
- {{key}} : {{value}}
- {{/foreach}}
- </p>
-
compare
比較兩個(gè)對(duì)象
- 語(yǔ)法：
- {{#compare a operator b}}
- {{else}}
- {{/compare}}
可以使用的operator：
operator == === != !== < <= > >= typeof 用法示例：
- {{#compare a "<" b}}
- a < b
- {{else}}
- a >= b
- {{/compare}}
- {{#compare a "typeof" "undefined"}}
- undefined
- {{/compare}}
注意：當(dāng)省略operator時(shí)，系統(tǒng)默認(rèn)使用操作符 ==：
{{#compare 1 1}} 1 == 1 {{/compare}} -
sumeru.config.view.set
語(yǔ)法：sumeru.config.view.set('path', viewpath);一般情況下將編寫(xiě)的view文件存放在app/view文件夾下，如果編寫(xiě)的view文件不在View文件夾下，我們也提供View文件路徑配置的方法，框架會(huì)在配置路徑下尋找需要的View文件:
實(shí)例：
sumeru.config.view.set('path', 'path/to/');則Clouda會(huì)在如下目錄中加載視圖：
app目錄/path/to/view/注意:即使是修改viewpath的情況下，在最內(nèi)一側(cè)仍然需要有一層view文件夾，如上面路徑的最后部分。
#p#
Transition
當(dāng)場(chǎng)景發(fā)生轉(zhuǎn)換時(shí)，通過(guò)transition定義場(chǎng)景轉(zhuǎn)換效果。
doRender(viewName,transition)-
viewName
需要渲染View的名稱(chēng)
-
transition
-
push
推出
-
方向
-
left
從左向右推出
-
right
從右向左推出
-
up
從上向下推出
-
down
從下向上推出
-
-
-
rotate
旋轉(zhuǎn)
-
方向
-
left
-
right
-
-
-
fade
漸變
-
方向
-
z-index
垂直方向
-
-
-
shake
退出場(chǎng)景時(shí)先縮小后放大退出，進(jìn)入場(chǎng)景從左或者右邊推入
-
方向
-
left
從左推入進(jìn)場(chǎng)
-
right
從右推入進(jìn)場(chǎng)
-
-
-
none
沒(méi)有轉(zhuǎn)場(chǎng)效果
-
方向參數(shù)
-
z
默認(rèn)參數(shù)
-
-
實(shí)例：
- env.onrender = function(doRender){
- doRender('student', ['push', 'down']);
- };
- env.onrender = function(doRender){
- doRender('student', ['none', 'z']);
- };
-
#p#
Controller
如果你曾經(jīng)接觸過(guò)MVC模型，那么將會(huì)很熟悉Controller的概念。在Clouda中，Controller是每個(gè)場(chǎng)景的控制器，負(fù)責(zé)實(shí)現(xiàn)App的核心業(yè)務(wù)邏輯。
-
create
語(yǔ)法：sumeru.controller.create(function(env,session){});創(chuàng)建一個(gè)Controller
App.studentList = sumeru.controller.create(function(env,session){}); -
env
-
redirect
語(yǔ)法：env.redirect(queryPath,paramMap,isforce)一個(gè)Controller跳轉(zhuǎn)到另一個(gè)Controller
env.redirect('/studentList',{'class':'101'});-
queryPath
router中pattern的值
-
paramMap
需要向跳轉(zhuǎn)Controller傳遞的參數(shù) -
isforce
是否強(qiáng)制生成一個(gè)全新的Controller實(shí)例。
如果在redirect中使用paramMap，可以在跳轉(zhuǎn)目標(biāo)Controller的create()中"param"接受參數(shù)。
- App.studentList = sumeru.controller.create(function(evn,session,param){
- });
-
-
refresh
語(yǔ)法： env.refresh()重新加載當(dāng)前Controller
env.refresh(); -
onload
語(yǔ)法：env.load()onload()是Controller的第一個(gè)時(shí)態(tài)，Controller中需要使用的數(shù)據(jù)都在這個(gè)時(shí)態(tài)中加載。
- env.onload = function(){
- return [ ];
- };
-
onrender
語(yǔ)法：env.onrender()當(dāng)數(shù)據(jù)獲取完成后，這些數(shù)據(jù)需要顯示在視圖(View)上，這個(gè)過(guò)程通過(guò)onrender()中的代碼來(lái)實(shí)現(xiàn)，這是Controller的第二個(gè)時(shí)態(tài)，負(fù)責(zé)完成對(duì)視圖(View)的渲染和指定轉(zhuǎn)場(chǎng)方式。
- env.onrender = function(doRender){
- doRender(viewName,transition);
- };
-
onready
語(yǔ)法：onready()這是Controller的第三個(gè)時(shí)態(tài)，在View渲染完成后，事件綁定、DOM操作等業(yè)務(wù)邏輯都在該時(shí)態(tài)中完成；每段邏輯使用session.event包裝，從而建立事件與視圖block的對(duì)應(yīng)關(guān)系。
- env.onready = function(){
- session.event(blockID,function(){
- });
- };
-
onsleep
語(yǔ)法：env.onsleep()當(dāng)Controller長(zhǎng)時(shí)間不處于活動(dòng)狀態(tài)時(shí)，可能會(huì)被置為睡眠狀態(tài)，以確保正在運(yùn)行中的Controller具有足夠的資源。如果需要在Controller被暫停之前運(yùn)行一些邏輯（比如暫存狀態(tài)等），可以在onsleep()中完成。
- env.onsleep = function(){
- };
-
onresume
語(yǔ)法：env.onresume()當(dāng)處在睡眠狀態(tài)的Controller被喚醒時(shí)，onresume()時(shí)態(tài)將被調(diào)用。該時(shí)態(tài)可用于執(zhí)行一些恢復(fù)性業(yè)務(wù)邏輯
- env.onresume = function(){
- };
-
ondestroy
語(yǔ)法：env.ondestroy當(dāng)Controller被銷(xiāo)毀時(shí)，ondestroy()將被調(diào)用。
- env.ondestroy = function(){
- };
-
onerror
語(yǔ)法： env.onerror當(dāng)前Controller收到錯(cuò)誤消息時(shí)被觸發(fā)
- env.onerror = function(){
- };
-
-
subscribe
語(yǔ)法： 不帶參數(shù)： env.subscribe(publishName, function(collection){}); 帶參數(shù)： env.subscribe(publishName,arg1,arg2, ... , function(collection){});關(guān)于subscribe方法請(qǐng)查看“Publish/Subscribe”章節(jié)。
-
session
-
set
語(yǔ)法：session.set(key,value)在session中設(shè)置“key”的值
session.set('page',10); -
get
語(yǔ)法：session.get(key)獲取session中“key”的值
session.get('page'); -
bind
語(yǔ)法：session.bind(block-id,dataMap)將數(shù)據(jù)綁定到視圖中block-id容器
- session.bind('student-list',{
- data : Collection.find()
- });
一般在subscribe(publishName,function(Collection){})的function(Collection){}中使用。
-
event
語(yǔ)法：seesion.event(block-id,function(){})建立事件與視圖block的對(duì)應(yīng)關(guān)系
- session.event('student-list'，function(){
- var submitButton = document.getElementById('submit');
- submitButton.addEventListener('click', submitMessage);
- });
-
eventMap
語(yǔ)法：session.eventMap(id,eventMap)對(duì)一個(gè)標(biāo)簽綁定多個(gè)事件
- session.eventMap('inputMessage',{
- 'focus':function(e){
- console.log('focus!');
- },
- 'blur':function(e){
- console.log('blur');
- },
- });
-
id
View中標(biāo)簽ID
-
eventMap
事件Map
-
commit
語(yǔ)法：session.commit()觸發(fā)數(shù)據(jù)對(duì)應(yīng)視圖block的更新
session.commit();
-
sub controller
創(chuàng)建的Controller可以作為另外一個(gè)Controller的子Controller使用。
-
callSubController
語(yǔ)法： callSubController(queryPath,options)在當(dāng)前Controller中調(diào)用一個(gè)子Controller，配合show()和hide()方法使用。
-
isready
語(yǔ)法：env.isready(){}當(dāng)前Controller的子Controller已經(jīng)加載完成
- env.isready = function(){
- };
-
show
語(yǔ)法：env.show(){}顯示當(dāng)前當(dāng)前Controller的子Controller
- env.show = function(){
- };
-
hide
語(yǔ)法：env.hide(){}隱藏當(dāng)前Controller的子Controller
- env.hide = function(){
- };
-
destory
語(yǔ)法：env.destory(){}銷(xiāo)毀當(dāng)前Controller的子Controller
- env.destroy = function(){
- };
-
