View

View使用handlebars組件作為模板引擎，handlebars語法請參考官網(wǎng)。

為了更快的開發(fā)視圖代碼，Clouda對handlebars的語法做了一些擴展：

• view中引入view

  語法： {{> viewName}}

  在一個View中引用另一個View。

• view中使用JS

  語法： {{$ alert("data.length"); }}

  在View中直接執(zhí)行Javascript代碼，并將返回結(jié)果輸出在View中。

• foreach

  用于快速遍歷一個對象或數(shù)組

  語法：{{#foreach}}{{/foreach}}

  用法示例：

  <p id="test-foreach-caseB"> 
       {{#foreach customObj}} 
           {{key}} : {{value}} 
       {{/foreach}} 
   </p> 

• compare

  比較兩個對象

  語法： 
      {{#compare a operator b}} 
      {{else}} 
      {{/compare}} 

  可以使用的operator：

  operator
  ==
  ===
  !=
  !==
  <
  <=
  >
  >=
  typeof

  用法示例：

  {{#compare a "<" b}} 
      a < b 
  {{else}} 
      a >= b 
  {{/compare}} 
   
  {{#compare a "typeof" "undefined"}} 
      undefined 
  {{/compare}} 

  注意：當省略operator時，系統(tǒng)默認使用操作符 ==：

  {{#compare 1 1}}     1 == 1 {{/compare}}

• sumeru.config.view.set

  語法：sumeru.config.view.set('path', viewpath);

  一般情況下將編寫的view文件存放在app/view文件夾下，如果編寫的view文件不在View文件夾下，我們也提供View文件路徑配置的方法，框架會在配置路徑下尋找需要的View文件:

  實例：

  sumeru.config.view.set('path', 'path/to/');

  則Clouda會在如下目錄中加載視圖：

  app目錄/path/to/view/

  注意:即使是修改viewpath的情況下，在最內(nèi)一側(cè)仍然需要有一層view文件夾，如上面路徑的最后部分。

#p#

Transition

當場景發(fā)生轉(zhuǎn)換時，通過transition定義場景轉(zhuǎn)換效果。

 doRender(viewName,transition)

• viewName

  需要渲染View的名稱

• transition

  • push

    推出

    • 方向

      • left

        從左向右推出

      • right

        從右向左推出

      • up

        從上向下推出

      • down

        從下向上推出

  • rotate

    旋轉(zhuǎn)

    • 方向

      • left

      • right

  • fade

    漸變

    • 方向

      • z-index

        垂直方向

  • shake

    退出場景時先縮小后放大退出，進入場景從左或者右邊推入

    • 方向

      • left

        從左推入進場

      • right

        從右推入進場

  • none

    沒有轉(zhuǎn)場效果

    • 方向參數(shù)

      • z

        默認參數(shù)

  實例：

  env.onrender = function(doRender){ 
      doRender('student', ['push', 'down']); 
  }; 
  env.onrender = function(doRender){ 
      doRender('student', ['none', 'z']); 
  }; 

#p#

Controller

如果你曾經(jīng)接觸過MVC模型，那么將會很熟悉Controller的概念。在Clouda中，Controller是每個場景的控制器，負責實現(xiàn)App的核心業(yè)務(wù)邏輯。

• create

  語法：sumeru.controller.create(function(env,session){});

  創(chuàng)建一個Controller

  App.studentList = sumeru.controller.create(function(env,session){});

• env

  • redirect

     語法：env.redirect(queryPath,paramMap,isforce)

    一個Controller跳轉(zhuǎn)到另一個Controller

        env.redirect('/studentList',{'class':'101'});

    • queryPath

      router中pattern的值

    • paramMap

      需要向跳轉(zhuǎn)Controller傳遞的參數(shù)

    • isforce

      是否強制生成一個全新的Controller實例。

    如果在redirect中使用paramMap，可以在跳轉(zhuǎn)目標Controller的create()中"param"接受參數(shù)。

    App.studentList = sumeru.controller.create(function(evn,session,param){ 
     
     
    }); 

  • refresh

    語法： env.refresh()

    重新加載當前Controller

    env.refresh();

  • onload

    語法：env.load()

    onload()是Controller的第一個時態(tài)，Controller中需要使用的數(shù)據(jù)都在這個時態(tài)中加載。

    env.onload = function(){ 
        return [ ]; 
    }; 

  • onrender

    語法：env.onrender()

    當數(shù)據(jù)獲取完成后，這些數(shù)據(jù)需要顯示在視圖(View)上，這個過程通過onrender()中的代碼來實現(xiàn)，這是Controller的第二個時態(tài)，負責完成對視圖(View)的渲染和指定轉(zhuǎn)場方式。

    env.onrender = function(doRender){ 
        doRender(viewName,transition); 
    }; 

  • onready

    語法：onready()

    這是Controller的第三個時態(tài)，在View渲染完成后，事件綁定、DOM操作等業(yè)務(wù)邏輯都在該時態(tài)中完成；每段邏輯使用session.event包裝，從而建立事件與視圖block的對應(yīng)關(guān)系。

    env.onready = function(){ 
     
        session.event(blockID,function(){ 
     
        }); 
     
    }; 

  • onsleep

    語法：env.onsleep()

    當Controller長時間不處于活動狀態(tài)時，可能會被置為睡眠狀態(tài)，以確保正在運行中的Controller具有足夠的資源。如果需要在Controller被暫停之前運行一些邏輯（比如暫存狀態(tài)等），可以在onsleep()中完成。

    env.onsleep = function(){ 
    }; 

  • onresume

    語法：env.onresume()

    當處在睡眠狀態(tài)的Controller被喚醒時，onresume()時態(tài)將被調(diào)用。該時態(tài)可用于執(zhí)行一些恢復性業(yè)務(wù)邏輯

    env.onresume = function(){ 
    }; 

  • ondestroy

    語法：env.ondestroy

    當Controller被銷毀時，ondestroy()將被調(diào)用。

    env.ondestroy = function(){ 
    }; 

  • onerror

    語法： env.onerror

    當前Controller收到錯誤消息時被觸發(fā)

    env.onerror = function(){ 
    }; 

• subscribe

  語法：  不帶參數(shù)： env.subscribe(publishName, function(collection){});         帶參數(shù)：  env.subscribe(publishName,arg1,arg2, ... , function(collection){});

  關(guān)于subscribe方法請查看“Publish/Subscribe”章節(jié)。

• session

  • set

    語法：session.set(key,value)

    在session中設(shè)置“key”的值

    session.set('page',10);

  • get

    語法：session.get(key)

    獲取session中“key”的值

    session.get('page');

  • bind

    語法：session.bind(block-id,dataMap)

    將數(shù)據(jù)綁定到視圖中block-id容器

    session.bind('student-list',{ 
     
        data : Collection.find() 
     
    }); 

    一般在subscribe(publishName,function(Collection){})的function(Collection){}中使用。

  • event

    語法：seesion.event(block-id,function(){})

    建立事件與視圖block的對應(yīng)關(guān)系

    session.event('student-list'，function(){ 
     
        var submitButton = document.getElementById('submit'); 
     
        submitButton.addEventListener('click', submitMessage);  
     
    }); 

  • eventMap

    語法：session.eventMap(id,eventMap)

    對一個標簽綁定多個事件

    session.eventMap('inputMessage',{ 
     
        'focus':function(e){     
            console.log('focus!'); 
        }, 
     
        'blur':function(e){ 
            console.log('blur'); 
        }, 
     
    }); 

    • id

      View中標簽ID

    • eventMap

      事件Map

  • commit

    語法：session.commit()

    觸發(fā)數(shù)據(jù)對應(yīng)視圖block的更新

    session.commit();

sub controller

創(chuàng)建的Controller可以作為另外一個Controller的子Controller使用。

• callSubController

  語法：  callSubController(queryPath,options)

  在當前Controller中調(diào)用一個子Controller，配合show()和hide()方法使用。

  • isready

    語法：env.isready(){}

    當前Controller的子Controller已經(jīng)加載完成

    env.isready = function(){ 
    }; 

  • show

    語法：env.show(){}

    顯示當前當前Controller的子Controller

    env.show = function(){ 
    }; 

  • hide

    語法：env.hide(){}

    隱藏當前Controller的子Controller

    env.hide = function(){ 
    }; 

  • destory

    語法：env.destory(){}

    銷毀當前Controller的子Controller

    env.destroy = function(){ 
    };