在skylark.js里视图(应用程序页面的视口)是由路由来代表的,路由通过路径识别和导航。 路径以“/”开始,支持参数,如
每个路由由配置和正好一个路由控制器组成,路由事件被发送到相应的路由控制器进行处理。
您需要为每个路由(视图)创建一个控制器类,并且在控制器类中,您应该为要处理的每个路由事件创建一个名称相同的方法。
以下路由控制器根据路径参数生成不同的视图呈现。
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模块时触发(即代码只执行一次),用于异步处理,比如获取后台数据。 事件对象具有以下属性:
当将要进入某个路由时触发(进入一次执行一次)
事件对象具有以下属性:
{ path : "/chapters/2", params : { id : "2" } }
当已进入某个路由时触发(进入一次执行一次)
事件对象具有以下属性:
当路由需要渲染视图时触发 (进入一次执行一次)
事件对象具有以下属性:
当路由需要渲染视图后触发(进入一次执行一次)
事件对象具有以下属性:
当将要离开某个路由时触发
事件对象具有以下属性:
当已离开某个路由时触发(进入一次执行一次)
事件对象具有以下属性:
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来执行这些脚本,不需要指定项目路径。