视图的开发

在skylark.js里视图（应用程序页面的视口）是由路由来代表的，路由通过路径识别和导航。 路径以“/”开始，支持参数，如

• /home
• /chapters/:id

每个路由由配置和正好一个路由控制器组成,路由事件被发送到相应的路由控制器进行处理。

您需要为每个路由（视图）创建一个控制器类，并且在控制器类中，您应该为要处理的每个路由事件创建一个名称相同的方法。

以下路由控制器根据路径参数生成不同的视图呈现。

ChapterController.js

define([
    "skylarkjs",
    "text!./templates/chapter1.html",
    "text!./templates/chapter2.html",
    "text!./templates/chapter3.html"
],function(spa,tpl1,tpl2,tpl3){
    var spa = skylarkjs.spa,
        $ = skylark.query;

    return spa.RouteController.inherit({
        klassName: "ChapterController",

        rendering(e) {
            var html;
            switch(e.context.params.id) {
                case "1" : html = tpl1;
                         break;
                case "2" : html = tpl2;
                         break;
                case "3" : html = tpl3;
                         break;
                default : html = "";
                         break;
            }
            e.content = html;
        },

        exiting(e) {
            var field = $('[name="field"]').val();
            if (field) {
                var ret = confirm('Are you sure you want to quit this chapter ?');
                if (!ret) {
                    e.result = false;
                }
            }           
        }
  });
	
});

所有路由需要在slax-config.json中配置，上述示例中的路由配置如下：

slax-config.json

{
...
   "routes" : {
      "chapter": {
          "pathto" : "/chapter/:id",
          "controller" : {
          	"type" : "scripts/routes/chapter/ChapterController"
          }
      }
    }
...


}

路线事件如下：

当runtime引用route模块时触发（即代码只执行一次），用于异步处理，比如获取后台数据。 事件对象具有以下属性：

• route
  Route实例
• result
  异步执行结果，一般为promise

当将要进入某个路由时触发（进入一次执行一次）

事件对象具有以下属性：

• route
  Route实例
• context
  将进入路由的路径和参数值信息 ,such as

  {
   path : "/chapters/2",
   params : {
     id : "2"
   }
  }

当已进入某个路由时触发（进入一次执行一次）

事件对象具有以下属性：

• route
  同其他所有路由事件
• context
  同其他所有路由事件

当路由需要渲染视图时触发 （进入一次执行一次）

事件对象具有以下属性：

• route
  同其他所有路由事件
• context
  同其他所有路由事件
• content
  The return value of the event handler, view content is set, can be an HTML string or a DOM node

当路由需要渲染视图后触发（进入一次执行一次）

事件对象具有以下属性：

• route
  同其他所有路由事件
• content
  The return value of the event handler, view content is set, can be an HTML string or a DOM node

当将要离开某个路由时触发

事件对象具有以下属性：

• route
  同其他所有路由事件
• context
  同其他所有路由事件
• result
  The return value of the event handler,If false is set, path changing is not allowed

当已离开某个路由时触发（进入一次执行一次）

事件对象具有以下属性：

• route
  同其他所有路由事件
• context
  同其他所有路由事件

skylark.js sdk提供了以下命令

使用以下命令添加一个或多个路由。

<route>是要添加的路由的名称和路径的定义，单个路由格式为<name>：<path>，多条路由与“，”分开

sjs routes add <slaxPrjRoot> <routes> 

example:

sjs routes add . home:/,chapter:/chapters/:id

使用以下命令删除一个或多个路由。

* sjs routes delete <slaxPrjRoot> <routes> 

<routes>是要删除的路由的名字列表，多条路由与“，”分开

使用以下命令列出现有路由。

  * sjs routes list <slaxPrjRoot> 

当使用sjs create命令创建slax项目时，上述sjs命令被包装到包脚本中，您可以使用npm run来执行这些脚本，不需要指定项目路径。

• npm run route-add – <routes>
• npm run route-delete – <routes>
• npm run route-list