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

  //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。