Clouda第一App“留言大厅”之创建hall.js

在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()方法会在下一篇文档中做专门介绍。<span class="pln"> </span>

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

  在上一篇文档中我们已经见过env.onrender()，这是Controller的第二个时态，负责对View的渲染，关于该时态在后续会做专门说明。<span class="pln"> </span>

  //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()两个还没有定义的方法，下面我们来实现它们。<span class="pln"> </span>

  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的一个重要特性。