Clouda开发随笔之block标签

大家在开发中会在试图模板（view ）中看到“ block ”标签，这个标签在view 起什么样的作用呢？如何灵活的使用呢？本帖将详细的介绍关于使用“block ”的那些事。

 

在Clouda 中有一个很重要的特性叫做“随动反馈”，当数据发生变化时会自动更新与数据关联view 的数据，那么view 怎么知道哪部分的数据需要根据数据来更新呢？这个就需要使用“block ”来做标记了。

 

“block ”在view 用于标记在这个标签内的数据需要随数据的变化而做实时的更新，在“block ”中只需要描述数据的最终呈现形式即可，例如：

<block tpl-id="chatroom_container">
      <div id="messages">
           {{#each data}}
                 <div class="username">{{this.username}}</div>
                 <div class="content">
                         {{this.message}}
                 </div>
           {{/each}}
     </div>
</block>

大家在上面的代码中可以看到“{{ }}”这样的语法，这是Handlebars语法 ，详细使用方法请参考官网： http://handlebarsjs.com/。这里使用Handlebars来描述数据的最终的呈现形式，在“block”中表示，这部分的数据会根据数据的变化完成自动实时更新。

 

如果我们在一个view中有多个区域需要实时更新而且是根据不用的数据来做更新的话，我们可以在一个view中多次使用“block”标签。

 

//聊天信息大厅
<block tpl-id="chatroom_container">
    <div id="messages">
        {{#each data}}
            <div class="username">{{this.username}}</div>
            <div class="content">
                {{this.message}}
            </div>
      {{/each}}
   </div>
</block>
//在线人数
<block tpl-id="user ">
    <div id="user_info">
        {{#each data}}
             <div class="username">{{this.username}}</div>
             <div class="login_time">{{this.login_time}}</div>
        {{/each}}
     </div>
</block>

　　

这样可以实现在一个View中实现多区域的局部信息更新。

 

如果在“block”中有标签事件的话，这个事件需要在Controller中onready()周期中的session.event()中完成事件绑定，如果不是在session.event()中完成的话，当时相应部分更新后，事件就会失效，请注意。