在app/controller/下創(chuàng)建hall.js

• hall.js

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

  我們在上一篇文檔中已經(jīng)看到過router，sumeru.router.add()作用是添加一個URL(其路徑部分)與Controller的映射關(guān)系，關(guān)于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的第一個時態(tài)，Controller中需要使用的數(shù)據(jù)都在這個時態(tài)中加載，我們先在這里添加上面的代碼，關(guān)于env.onload()方法會在下一篇文檔中做專門介紹。

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

  在上一篇文檔中我們已經(jīng)見過env.onrender()，這是Controller的第二個時態(tài)，負責(zé)對View的渲染，關(guān)于該時態(tài)在后續(xù)會做專門說明。

  //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的第三個時態(tài)，在View渲染完成后，事件綁定、DOM操作等業(yè)務(wù)邏輯都在該時態(tài)中完成。

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

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

  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，在通常情況下，調(diào)用.save()方法會自動觸發(fā)對應(yīng)視圖block的更新。

  從這里可以看出，Clouda設(shè)計的核心是面向數(shù)據(jù)的，當(dāng)數(shù)據(jù)發(fā)生改變時Clouda會自動更新與該數(shù)據(jù)有關(guān)聯(lián)的視圖block，我們稱之為"隨動反饋"，這是Clouda的一個重要特性。

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

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