View

View使用handlebars组件作为模板引擎，handlebars语法请参考官网。

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好成都网站设计、成都网站建设、外贸网站建设服务，我们努力开拓更好的视野，通过不懈的努力，创新互联赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,微信小程序,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

为了更快的开发视图代码，Clouda对handlebars的语法做了一些扩展：

• view中引入view

  语法： {{> viewName}}

  在一个View中引用另一个View。

• view中使用JS

  语法： {{$ alert("data.length"); }}

  在View中直接执行Javascript代码，并将返回结果输出在View中。

• foreach

  用于快速遍历一个对象或数组

  语法：{{#foreach}}{{/foreach}}

  用法示例：

     
     
  
      
      
   
      
      
       {{#foreach customObj}} 
      
      
           {{key}} : {{value}} 
      
      
       {{/foreach}} 
      
      
   
   
     
     

• compare

  比较两个对象

     
     
  
      
      
  语法： 
      
      
      {{#compare a operator b}} 
      
      
      {{else}} 
      
      
      {{/compare}} 
     
     

  可以使用的operator：

  operator
  ==
  ===
  !=
  !==
  <
  <=
  >
  >=
  typeof

  用法示例：

     
     
  
      
      
  {{#compare a "<" b}} 
      
      
      a < b 
      
      
  {{else}} 
      
      
      a >= b 
      
      
  {{/compare}} 
      
      
   
      
      
  {{#compare a "typeof" "undefined"}} 
      
      
      undefined 
      
      
  {{/compare}} 
     
     

  注意：当省略operator时，系统默认使用操作符 ==：

  {{#compare 1 1}} 1 == 1 {{/compare}}

• sumeru.config.view.set

  语法：sumeru.config.view.set('path', viewpath);

  一般情况下将编写的view文件存放在app/view文件夹下，如果编写的view文件不在View文件夹下，我们也提供View文件路径配置的方法，框架会在配置路径下寻找需要的View文件:

  实例：

  sumeru.config.view.set('path', 'path/to/');

  则Clouda会在如下目录中加载视图：

  app目录/path/to/view/

  注意:即使是修改viewpath的情况下，在最内一侧仍然需要有一层view文件夹，如上面路径的最后部分。

#p#

Transition

当场景发生转换时，通过transition定义场景转换效果。

 doRender(viewName,transition)

• viewName

  需要渲染View的名称

• transition

  • push

    推出

    • 方向

      • left

        从左向右推出

      • right

        从右向左推出

      • up

        从上向下推出

      • down

        从下向上推出

  • rotate

    旋转

    • 方向

      • left

      • right

  • fade

    渐变

    • 方向

      • z-index

        垂直方向

  • shake

    退出场景时先缩小后放大退出，进入场景从左或者右边推入

    • 方向

      • left

        从左推入进场

      • right

        从右推入进场

  • none

    没有转场效果

    • 方向参数

      • z

        默认参数

  实例：

     
     
  
      
      
  env.onrender = function(doRender){ 
      
      
      doRender('student', ['push', 'down']); 
      
      
  }; 
      
      
  env.onrender = function(doRender){ 
      
      
      doRender('student', ['none', 'z']); 
      
      
  }; 
     
     

#p#

Controller

如果你曾经接触过MVC模型，那么将会很熟悉Controller的概念。在Clouda中，Controller是每个场景的控制器，负责实现App的核心业务逻辑。

• create

  语法：sumeru.controller.create(function(env,session){});

  创建一个Controller

  App.studentList = sumeru.controller.create(function(env,session){});

• env

  • redirect

     语法：env.redirect(queryPath,paramMap,isforce)

    一个Controller跳转到另一个Controller

     env.redirect('/studentList',{'class':'101'});

    • queryPath

      router中pattern的值

    • paramMap

      需要向跳转Controller传递的参数

    • isforce

      是否强制生成一个全新的Controller实例。

    如果在redirect中使用paramMap，可以在跳转目标Controller的create()中"param"接受参数。

         
         
    
          
          
    App.studentList = sumeru.controller.create(function(evn,session,param){ 
          
          
     
          
          
     
          
          
    }); 
         
         

  • refresh

    语法： env.refresh()

    重新加载当前Controller

    env.refresh();

  • onload

    语法：env.load()

    onload()是Controller的第一个时态，Controller中需要使用的数据都在这个时态中加载。

         
         
    
          
          
    env.onload = function(){ 
          
          
        return [ ]; 
          
          
    }; 
         
         

  • onrender

    语法：env.onrender()

    当数据获取完成后，这些数据需要显示在视图(View)上，这个过程通过onrender()中的代码来实现，这是Controller的第二个时态，负责完成对视图(View)的渲染和指定转场方式。

         
         
    
          
          
    env.onrender = function(doRender){ 
          
          
        doRender(viewName,transition); 
          
          
    }; 
         
         

  • onready

    语法：onready()

    这是Controller的第三个时态，在View渲染完成后，事件绑定、DOM操作等业务逻辑都在该时态中完成；每段逻辑使用session.event包装，从而建立事件与视图block的对应关系。

         
         
    
          
          
    env.onready = function(){ 
          
          
     
          
          
        session.event(blockID,function(){ 
          
          
     
          
          
        }); 
          
          
     
          
          
    }; 
         
         

  • onsleep

    语法：env.onsleep()

    当Controller长时间不处于活动状态时，可能会被置为睡眠状态，以确保正在运行中的Controller具有足够的资源。如果需要在Controller被暂停之前运行一些逻辑（比如暂存状态等），可以在onsleep()中完成。

         
         
    
          
          
    env.onsleep = function(){ 
          
          
    }; 
         
         

  • onresume

    语法：env.onresume()

    当处在睡眠状态的Controller被唤醒时，onresume()时态将被调用。该时态可用于执行一些恢复性业务逻辑

         
         
    
          
          
    env.onresume = function(){ 
          
          
    }; 
         
         

  • ondestroy

    语法：env.ondestroy

    当Controller被销毁时，ondestroy()将被调用。

         
         
    
          
          
    env.ondestroy = function(){ 
          
          
    }; 
         
         

  • onerror

    语法： env.onerror

    当前Controller收到错误消息时被触发

         
         
    
          
          
    env.onerror = function(){ 
          
          
    }; 
         
         

• subscribe

  语法： 不带参数： env.subscribe(publishName, function(collection){}); 带参数： env.subscribe(publishName,arg1,arg2, ... , function(collection){});

  关于subscribe方法请查看“Publish/Subscribe”章节。

• session

  • set

    语法：session.set(key,value)

    在session中设置“key”的值

    session.set('page',10);

  • get

    语法：session.get(key)

    获取session中“key”的值

    session.get('page');

  • bind

    语法：session.bind(block-id,dataMap)

    将数据绑定到视图中block-id容器

         
         
    
          
          
    session.bind('student-list',{ 
          
          
     
          
          
        data : Collection.find() 
          
          
     
          
          
    }); 
         
         

    一般在subscribe(publishName,function(Collection){})的function(Collection){}中使用。

  • event

    语法：seesion.event(block-id,function(){})

    建立事件与视图block的对应关系

         
         
    
          
          
    session.event('student-list'，function(){ 
          
          
     
          
          
        var submitButton = document.getElementById('submit'); 
          
          
     
          
          
        submitButton.addEventListener('click', submitMessage);  
          
          
     
          
          
    }); 
         
         

  • eventMap

    语法：session.eventMap(id,eventMap)

    对一个标签绑定多个事件

         
         
    
          
          
    session.eventMap('inputMessage',{ 
          
          
     
          
          
        'focus':function(e){     
          
          
            console.log('focus!'); 
          
          
        }, 
          
          
     
          
          
        'blur':function(e){ 
          
          
            console.log('blur'); 
          
          
        }, 
          
          
     
          
          
    }); 
         
         

    • id

      View中标签ID

    • eventMap

      事件Map

  • commit

    语法：session.commit()

    触发数据对应视图block的更新

    session.commit();

sub controller

创建的Controller可以作为另外一个Controller的子Controller使用。

• callSubController

  语法： callSubController(queryPath,options)

  在当前Controller中调用一个子Controller，配合show()和hide()方法使用。

  • isready

    语法：env.isready(){}

    当前Controller的子Controller已经加载完成

         
         
    
          
          
    env.isready = function(){ 
          
          
    }; 
         
         

  • show

    语法：env.show(){}

    显示当前当前Controller的子Controller

         
         
    
          
          
    env.show = function(){ 
          
          
    }; 
         
         

  • hide

    语法：env.hide(){}

    隐藏当前Controller的子Controller

         
         
    
          
          
    env.hide = function(){ 
          
          
    }; 
         
         

  • destory

    语法：env.destory(){}

    销毁当前Controller的子Controller

         
         
    
          
          
    env.destroy = function(){ 
          
          
    };       
         
         

文章标题：CloudaAPI使用手册之ViewTransitionController
文章起源：http://cdbrznjsb.com/article/cdghheh.html