在app/controller/下創建hall.js

• hall.js

  sumeru.router.add( 
      { 
          pattern: '/hall', 
          action : 'App.hall' 
      } 
  ); 

  我們在上一篇文檔中已經看到過router，sumeru.router.add()作用是添加一個URL(其路徑部分)與Controller的映射關系，關于router在下一篇文檔中會做專門說明。

  App.hall = sumeru.controller.create(function(env, session){ 
      var getMsgs = function(){        
          session.messages = env.subscribe('pub-message', function(msgCollection){ 
              //manipulate synced collection and bind it to serveral view blocks. 
              session.bind('message-hall', { 
                  data    :   msgCollection.find() 
              }); 
          }); 
      };       
      //onload is respond for handle all data subscription 
      env.onload = function(){             
          return [getMsgs];             
      }; 

  大家可以看到在這里多了一個env.onload()，這是Controller的第一個時態，Controller中需要使用的數據都在這個時態中加載，我們先在這里添加上面的代碼，關于env.onload()方法會在下一篇文檔中做專門介紹。

  //sceneRender is respond for handle view render and transition 
     env.onrender = function(doRender){ 
         doRender('hall', ['push', 'left']); 
     }; 

  在上一篇文檔中我們已經見過env.onrender()，這是Controller的第二個時態，負責對View的渲染，關于該時態在后續會做專門說明。

  //onready is respond for event binding and data manipulate 
    env.onready = function(){            
        Library.touch.on('.messageSubmit', 'touchstart', submitMessage); 
        Library.touch.on('.clearHistory', 'touchstart', clearHistory); 
    }; 

  我們看到這里多了一個env.onready()，這是Controller的第三個時態，在View渲染完成后，事件綁定、DOM操作等業務邏輯都在該時態中完成。

  為了方便開發者更快的開發移動端的應用，Clouda中內置了手勢事件庫，關于手勢事件庫在API手冊中Touch部分會做詳細的說明，在這里使用了手指輕觸事件touch，如果您是在PC瀏覽器中運行應用需要開啟瀏覽器的Emulate touch events功能。

  在上面的代碼中可以看到，我們使用了submitMessage()和clearHistory()兩個還沒有定義的方法，下面我們來實現它們。

  var submitMessage = function(){ 
        var input = document.getElementById('messageInput'), 
            inputVal = input.value.trim();       
        if (inputVal == '') { 
           return false;  
        }; 
        session.messages.add({ 
           content : inputVal 
        }); 
        session.messages.save(); 
        input.value = '';           
    }; 

  在submitMessage()中我們使用了session.message.add()和session.message.save()，.add()用于在collection中新增一個Model。.save()是用于將collection的修改保存到Server，在通常情況下，調用.save()方法會自動觸發對應視圖block的更新。

  從這里可以看出，Clouda設計的核心是面向數據的，當數據發生改變時Clouda會自動更新與該數據有關聯的視圖block，我們稱之為"隨動反饋"，這是Clouda的一個重要特性。

      var clearHistory = function(){ 
          session.messages.destroy(); 
          session.messages.save(); 
      }        
  }); 

  同.add()的使用方法類似，.destroy()作用是將collection中的數據全部清空，數據清空后同樣我們調用.save()根據數據的變化重新渲染與該數據關聯視圖block。