View

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

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

• view中引入view

  語法： {{> viewName}}

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

• view中使用JS

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

  在View中直接執行Javascript代碼，并將返回結果輸出在View中。

• foreach

  用于快速遍歷一個對象或數組

  語法：{{#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時，系統默認使用操作符 ==：

  {{#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的情況下，在最內一側仍然需要有一層view文件夾，如上面路徑的最后部分。

#p#

Transition

當場景發生轉換時，通過transition定義場景轉換效果。

 doRender(viewName,transition)

• viewName

  需要渲染View的名稱

• transition

  • push

    推出

    • 方向

      • left

        從左向右推出

      • right

        從右向左推出

      • up

        從上向下推出

      • down

        從下向上推出

  • rotate

    旋轉

    • 方向

      • left

      • right

  • fade

    漸變

    • 方向

      • z-index

        垂直方向

  • shake

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

    • 方向

      • left

        從左推入進場

      • right

        從右推入進場

  • none

    沒有轉場效果

    • 方向參數

      • z

        默認參數

  實例：

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

#p#

Controller

如果你曾經接觸過MVC模型，那么將會很熟悉Controller的概念。在Clouda中，Controller是每個場景的控制器，負責實現App的核心業務邏輯。

• create

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

  創建一個Controller

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

• env

  • redirect

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

    一個Controller跳轉到另一個Controller

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

    • queryPath

      router中pattern的值

    • paramMap

      需要向跳轉Controller傳遞的參數

    • isforce

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

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

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

  • refresh

    語法： env.refresh()

    重新加載當前Controller

    env.refresh();

  • onload

    語法：env.load()

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

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

  • onrender

    語法：env.onrender()

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

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

  • onready

    語法：onready()

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

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

  • onsleep

    語法：env.onsleep()

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

    env.onsleep = function(){ 
    }; 

  • onresume

    語法：env.onresume()

    當處在睡眠狀態的Controller被喚醒時，onresume()時態將被調用。該時態可用于執行一些恢復性業務邏輯

    env.onresume = function(){ 
    }; 

  • ondestroy

    語法：env.ondestroy

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

    env.ondestroy = function(){ 
    }; 

  • onerror

    語法： env.onerror

    當前Controller收到錯誤消息時被觸發

    env.onerror = function(){ 
    }; 

• subscribe

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

  關于subscribe方法請查看“Publish/Subscribe”章節。

• session

  • set

    語法：session.set(key,value)

    在session中設置“key”的值

    session.set('page',10);

  • get

    語法：session.get(key)

    獲取session中“key”的值

    session.get('page');

  • bind

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

    將數據綁定到視圖中block-id容器

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

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

  • event

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

    建立事件與視圖block的對應關系

    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()

    觸發數據對應視圖block的更新

    session.commit();

sub controller

創建的Controller可以作為另外一個Controller的子Controller使用。

• callSubController

  語法：  callSubController(queryPath,options)

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

  • isready

    語法：env.isready(){}

    當前Controller的子Controller已經加載完成

    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(){ 
    };