匿名递归

命名递归-增加name属性

` } data(){ return { ritem:{ title:"第一层", cls:'cls1', ritem:{ title:"第二层", cls:"cls2", ritem:{ title:"第三层", cls:"cls3" } } } }; } } ``` 在实际使用中，通常数据项由数组构成，如树、菜单等，下面是数据项为数组的结构示例： ```js class Main extends Module{ template(){ return `

id is:{{id}}-{{title}}

` } data(){ return{ items:[ { title:'aaa', id:1, items:[{ id:1, title:'aaa1', items:[ {title:'aaa12',id:12}, {title:'aaa11',id:11,items:[ {title:'aaa111',id:111}, {title:'aaa112',id:112} ]}, {title:'aaa13',id:13} ]},{ title:'aaa2', id:2, items:[ {title:'aaa21',id:21,items:[ {title:'aaa211',id:211,items:[ {title:'aaa2111',id:111}, {title:'aaa2112',id:112} ]}, {title:'aaa212',id:212}, ]}, {title:'aaa22',id:22} ]} ] },{ title:'bbb', id:2, items:[{ title:'bbb1', id:10, items:[ {title:'bbb11',id:1011}, {title:'bbb12',id:1012} ]},{ title:'bbb2', id:20 }] } ] } } } ``` **简写方式** recur指令可以用`recur`元素进行简写，指令值用cond属性进行配置，从上面的例子可以看到`recur`元素的用法。 #### if/elseif/else/endif 指令与javascript的if/else/else if逻辑一致，当if指令条件为true时，则渲染该节点。当if指令条件为false时，则进行后续的elseif指令或else指令判断，如果某个节点判断条件为true，则渲染该节点，最后通过endif指令结束上一个if条件判断。示例如下： ```js class Main extends Module{ template(){ return `

不及格，分数为：{{score}}

及格，分数为：{{score}}

中等，分数为：{{score}}

良好，分数为：{{score}}

优秀，分数为：{{score}}

` } data(){ return { score:75 } } change(){ this.model.score=90; } } ``` **简写方式** 使用对应名称的元素即可，改写上例的模板如下： ```js class Main extends Module{ template(){ return `

不及格，分数为：{{score}} 及格，分数为：{{score}} 中等，分数为：{{score}} 良好，分数为：{{score}} 优秀，分数为：{{score}}

` } ... } ``` #### show 指令 show指令用于显示或隐藏dom节点，如果指令对应的表达式返回为true，则显示该视图，否则隐藏（display='none'），示例如下： ```js class Main extends Module{ template(){ return `

价格：{{price}}

` } data(){ return { show:true, price:200 } } toggle(){ this.model.show = !this.model.show; } } ``` **简写方式** 使用show元素即可，改写上例的模板如下： ```js class Main extends Module{ template(){ return `

价格：{{price}}

` } ... } ``` #### module 指令 module指令用于表示该元素是一个子模块，module指令对应的模块会被渲染至该元素所在位置。使用方式为x-module='模块类名'，子模块需要通过父模块的`modules`属性进行声明。示例如下： modulea.js文件 ```js //需使用export export class ModuleA extends Module{ ... } ``` main.js 文件 ```js import {ModuleA} from './modulea.js' class Main extends Module{ //声明 MmoduleA modules=[ModuleA] template(){

...

} ... } ``` **简写方式** 使用module元素或module类名两种方式进行简写，改写上例的模板如下： ```js class Main extends Module{ modules=[ModuleA] template(){

...

} ... } ``` #### field 指令 field指令用于实现input、select、textarea等输入元素与数据项之间的双向绑定。 **配置说明** - 单选框radio：多个radio的x-field值必须设置为同一个model属性名，同时需要设置value属性，选中值为value属性对应的值。 - 复选框checkbox：除了设置x-field绑定数据项外，还需要设置yes-value和no-value两个属性，分别对应选中和未选中的值。示例如下： ```js class Main extends Module{ template(){ return `

姓名：性别：男女已婚：学历：

` } data(){ return{ name: 'nodom', sexy: 'F', married: 1, edu: 2, //下拉列表option数据 edus: [ { eduId: 1, eduName: "高中" }, { eduId: 2, eduName: "本科" }, { eduId: 3, eduName: "硕士研究生" }, { eduId: 4, eduName: "博士研究生" }, ] } } } ``` #### slot 指令 slot指令为插槽指令，表示该dom节点是一个插槽，插槽作为模板暴露的外部接口，增大了模板的灵活度，更利于模块化开发。详细使用见[插槽](#插槽)。 #### route 指令 route将当前dom设定路由节点，点击dom将跳进行路由跳转。使用方式如下： ```html 跳转到path ``` 可使用`route`元素进行替代，route指令的值由path代替。默认元素为`a`,如果修改，则设置`tag`属性。改写上例代码如下： ```html 跳转到path 跳转到path ``` `path`值为定义的路由路径，更多详情参考[路由](#路由)。 #### router 指令 router指令用于定义路由模块的容器，如果使用了`route`指令，必须在模版中使用`router`指令，示例如下： ```html 跳转到path ...

``` 同样，可以用`router`元素代替，修改如下： ```html 跳转到path ... ``` ### ajax请求通过`Nodom.request`方法进行ajax请求，请求参数为object或string，如果为string，则直接以get方式获取参数指定的url资源，我们建议传递object，object 各项配置如下: 参数名|类型|默认值|必填|可选值|描述 -|-|-|-|-|- url|string|无|是|无|请求url method|string|GET|否|GET,POST,HEAD|请求类型 params|Object/FormData|{}|否|无|参数，json格式 async|bool|true|否|true,false|是否异步 timeout|number|0|否|无|请求超时时间 type|string|text|否|json,text| withCredentials|bool|false|否|true,false|同源策略，跨域时cookie保存 header|Object|无|否|无|request header 对象 user|string|无|否|无|需要认证的请求对应的用户名 pwd|string|无|否|无|需要认证的请求对应的密码 rand|bool|无|否|无|请求随机数，设置则浏览器缓存失效为避免重复请求，可以通过`Nodom.setRejectTime(time)`方法设置重复请求拒绝的间隔时间，单位为ms。 > 如果需要使用其它的ajax库，需重写`Nodom.request`方法，且返回类型为Promise。 ## 深入 > 本章节建议先阅读完前面内容。 ### 模块 #### 模块注册 Nodom为模块提供两种注册方式： 1. 模块modules数组注册 ```js // 待注册模块A export class ModuleA extends Module{ template(){ return `

this is ModuleA

` } } // 待注册模块B export class ModuleB extends Module{ template(){ return `

this is ModuleB

` } } // 注册使用模块A，B class Main extends Module{ modules=[ModuleA,ModuleB] template(){ return `

` } } ``` 2. `Nodom.registModule`方法注册 `Nodom.registModule`方法可以给待注册模块设置**别名**，在模板代码中使用模块时，既可以使用模块类名作为元素名引入，也可以使用注册的别名作为元素名引入。 ```js export class ModuleA extends Module{ template(){ return `

this is ModuleA

` } } //注册ModuleA并设置别名为 user Nodom.registModule(ModuleA,'user'); export class Main extends Module{ template(){ return `

` } } ``` #### 属性传递为了加强模块之间的联系，Nodom在父子（如果为插槽，则是模板所在模块和内部模块，下同）模块之间提供props来传递数据。除根模块外，每个模块在执行template方法时，会将子模块对应的节点属性以对象的形式作为参数传入，也就是说，子模块可以在自己的template函数内，依据传入的props来**动态创建模板**。 ```js //模块A class ModuleA extends Module{ template(props){ let str; //根据传递的name属性生成不同模板串 if(props.name=='add'){ return `

add

` }else{ return `

none

` } } } Nodom.registModule(ModuleA,'user'); // 根模块 class Main extends Module{ template(){ return `

` } } ``` #### 模块传值 props实现了属性传递，也可以实现父模块向子模块的数据传递，但是这是被动的传递方式，需要手动进行转换，如果需要将值传递至子模块的model，可以在传递的属性名前，加上`$`前缀，Nodom会将其传入子模块的根model内，实现响应式监听。 > 注意：如果传值是一个对象，则该对象存在于两个模块内，对象内数据的改变会造成两个模块的渲染，建议传值时，尽量使用非对象数据。 ```js //模块A class ModuleA extends Module{ template(props){ return `

` } } //根模块 class Main extends Module{ modules = [ModuleA] template(){ return `

` } data(){ return { name:'Nodom', } } } ``` #### 反向传递由于Props的存在，父模块可以暴露外部接口，将其通过Props传递给子模块，子模块调用该方法即可实现反向传递的功能。例如: ```js //模块A class ModuleA extends Module{ template(props){ this.parentChange=props.add; return `

` } change(){ this.parentChange(1); } } Nodom.registModule(ModuleA,'user'); //根模块 class Main extends Module{ template(){ return `

count={{sum}}

` } data(){ return { sum:0, } } //这里需要使用箭头函数，来使该函数的this始终指向根模块，或者使用bind函数绑定this指向 add=(num)=>{ this.model.sum++; } } ``` #### 多模块数据共享上述的值或属性传递，只能存在于父子之间，不能解决兄弟节点或不同父模块之间的传递问题，Nodom提供了`GlobalCache`来管理共享数据，实现多个模块的数据共享。 `GlobalCache`内置`get(获取)`、`set(设置)`、`remove(移除)`、`subscribe(订阅)`方法以便操作数据。 ```js import{Nodom,Module,GlobalCache} from '/dist/nodom.esm.js' //无论数据是否存在，都可以订阅 GlobalCache.set("globalData", { msg: 0, }); class ModuleA extends Module { template() { return `

`; } change() { let data = GlobalCache.get("globalData"); if(!data){ data = {msg:0} }else{ data.msg++; } GlobalCache.set("globalData",data); } } class ModuleB extends Module { template() { return `

moduleb global data is:{{msg}}

`; } onInit(model) { //订阅数据 GlobalCache.subscribe(this, "globalData", (val) => { model.msg = val.msg; }); } } class Main extends Module { modules = [ModuleA,ModuleB]; template() { return `

main global data is:{{msg}}

`; } onInit(model) { //订阅数据 GlobalCache.subscribe(this, "globalData", (val) => { model.msg = val.msg; }); } } ``` 也可使用第三方**数据发布-订阅**库。在开发大型项目时，可以使用数据管理库帮助我们管理数据，使数据以可预测的方式发生变化，我们推荐使用Nodom团队开发的**kayaks**库，或者其他优秀的数据管理库均可。 ### 插槽在实际开发中，插槽功能会较大程度的降低应用开发难度，插槽作为模板暴露的外部接口，增大了模板的灵活度，更利于模块化开发。Nodom以指令和自定义元素的方式实现插槽功能。 ```html ...

...

... ``` #### innerRender 插槽内的节点渲染时的默认数据来源于所属模板的模块的model，而某些时候，需要用子模块内部的数据进行渲染，Nodom提供innerRender属性支持。 > 注意：添加innerRender后，插槽内元素表达式依赖的数据项、方法，定义的事件方法都来源于子模块，否则都来源于模板所在模块。下面的例子中，渲染数据name来源于模块Main。 ```js class ModuleA extends Module{ template(props){ return `

` } data(){ return{ name:'noomi' } } } class Main extends Module{ modules=[ModuleA] template(props){ return `

my name is : {{name}}

` } data(){ return{ name:'nodom3' } } } ``` 显示为 `my name is :nodom3` 下面的例子中，渲染数据name来源于模块ModuleA。 ```js class ModuleA extends Module{ template(props){ return `

` } data(){ return{ name:'noomi' } } } class Main extends Module{ modules=[ModuleA] template(props){ return `

my name is : {{name}}

` } data(){ return{ name:'nodom3' } } } ``` 显示为`my name is :noomi`; #### 匿名插槽如果子模块内`slot`元素无`name`属性，则模块(如下面的`modulea`)元素内的元素会替换子模块的`slot`元素。 ```js //模块A class ModuleA extends Module{ template(props){ return `

我是默认内容

` } } class Main extends Module{ modules=[ModuleA]; template(){ return `

我是父模块的P元素

` } } ``` 若是无插入，则会显示插槽里的内容。 #### 命名插槽在实际使用中，可能需要多个插槽，就需要使用命名插槽，通过插槽的`name`属性设置插槽名字。命名插槽就是给插槽定义插槽名，传入的元素需要与插槽名一致才可发生替换。 ```js //模块A class ModuleA extends Module{ template(props){ return `

我是title 我是footer

` } } // 根模块 modulea元素内的slot元素内容作为待插入的内容 class Main extends Module{ modules=[ModuleA]; template(){ return `

` } } ``` > 详细使用见`examples/slot.html`。 ### 模型(Model) `Model`作为模块数据的提供者，绑定到模块的数据模型都由`Model`管理。`Model`是一个由`Proxy`代理的对象，`Model`的数据来源有两个： - 模块实例的`data()`函数返回的对象; - 父模块通过`$data`方式传入的值。每一个模块都有独立的`Model`，使用方式如下： ```js class ModuleA extends Module{ template(props){ return `

`; } } //根模块 class Main extends Module{ modules=[ModuleA]; template(){ return `

` ; } data(){ return { name:'Nodom' } } } ``` `Model`会深层代理内部的`object`类型数据。`Model`分层结构与所代理的数据对象结构一样，即父Model和子孙Model的关系。基于`Proxy`，Nodom可以实现数据劫持和数据监听，来做到数据改变时候的响应式更新渲染。 > 关于`Proxy`的详细信息请参照[Proxy-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)。在使用的时，可以直接把`Model`当作对象来操作： ```js class Main extends Module{ template(){ return `

` } // 模块的数据来源 data(){ return { title:'Hello', count:0 } } changeCount(model){ model.count++; } } ``` #### 保留属性 **Model提供了4个保留属性，用户在定义数据项时应避免。** 数据项 | 说明 | 类型 | 备注 -|-|-|- __source| 源数据对象 | object| 通过此属性可以获取被代理的数据对象 __key| model key(全局唯一) | number | - __module| 所属模块 | Module | - __parent| 父Model | Model | 可通过此属性获取祖先model __name|在父模型中的属性名 | string | - #### Model与模块渲染每个`Model`存有一个模块列表，当`Model`内部的数据变化时，会引起该`Model`的模块列表中所有模块的渲染。一个`Model`的模块列表中默认只有初始化该`Model`的模块，当存在slot或模块传值为**对象**时，将会导致Model绑定到多个模块，当然也可以通过`ModelManager的bindToModule`方法绑定。 #### set方法在module中提供了一个`set()`方法，该方法可以往`model`上设置一个深层次的对象或值。当model缺省，则表示模块根model。 ##### 参数说明序号|说明 |类型 -|-|- 1|模型 | Model 2|属性名| string 3|属性值 | any > 如果第一个参数为属性名，则第二个参数为属性值，默认model为根模型 ```js data(){ return { data:{ a:1, b:'b' } } } change(model){ // 会报错，因为data1为undefined model.data1.data2.data3 = { a:'a' }; // 使用$set可以避免该问题，如果不存在这么深层次的对象$set会帮你创建。 this.set("data1.data2.data3",{a:'a'}); } ``` #### get方法 Module中提供了一个`get()`方法，可以从`Model`上获取一个深层次的对象值，当不知道对象具体层次时有效。 ##### 参数说明 model: Model, key: string, value:any 序号| 说明|类型 -|-|- 1 | model | Model 2 | 属性名 | string > 如果第一个参数为属性名，则默认model为根模型 ```js data(){ return { data:{ a:1, b:'b' } } } getValue(){ // 等同于 this.model.data.a console.log(this.get("data.a")); } ``` #### watch方法 module的`watch`方法用来检测`Model`里的数据变化，当数据变化时执行配置的钩子函数。 ##### 参数说明参数名|类型|参数说明 -|-|- model | Model | 监听对象，如果省略，则表示module的根model key | string或string[] | 监听属性 operate | Function | 监听触发方法，默认参数为(model,key,oldValue,newValue)，其中model为被监听的model，key为监听的键，oldValue为旧值，newValue为新值 deep | boolean | 如果设置为true，当key对应项为对象时，对象的所有属性、子孙对象所有属性都会watch，慎重使用该参数，避免watch过多造成性能损失。 ##### 取消watch watch 方法会返回一个函数，当不需要watch时，执行该函数即可取消watch。 ##### 示例详细使用请参考 examples/model.html。 ```js import{Nodom,Module} from '/dist/nodom.esm.js' //模块A class Main extends Module{ template(){ return `

` } data(){ return { count:1, user:{ name:{ first:'nodom', last:'noomi' } }, hobbies:[{name:'健身'},{name:'游戏'}] } } //激活watch，通常情况下，我们把watch放置在onBeforeFirstRender事件中 watchActive(model){ //当被监听的model为根model时，可以省略 this.watcher = this.watch('count',(model,key,oldVal,newVal)=>{ console.log('检测到数据变化'); console.log('oldVal：',oldVal); console.log('newVal：',newVal); }) //等价于 // this.watcher = this.watch(this.model,'count',(m,key,oldVal,newVal)=>{ // console.log('检测到数据变化'); // console.log('oldVal：',oldVal); // console.log('newVal：',newVal); // }) //watch多个，并设置deep为true this.watch(['user.name','hobbies'],(model,key,oldVal,newVal)=>{ console.log(model,key,oldVal,newVal); },true); } //修改数据 change(){ this.model.count++; this.model.hobbies[1].name='旅游'; this.model.user.name.last = 'relaen'; } //取消监听 cancelWatch(){ //cancel count数据项的watch this.watcher(); } } ``` ### 编译当首次渲染或`tempate()`返回的模板串发生改变时，会触发模板重新编译，所以在构造模板串时，尽量避免用可变的props值或model项来构造，而是采用指令、表达式或插槽的方式来保持渲染的动态性。下面的模板是不建议的 ```js //子模块 ModuleA template(props){ return `

hello world

` } //父模块 Main template(props){ return `

` } ``` 当模块Main的数据type发生改变时，会导致ModuleA重新编译，改进方式如下： ```js //子模块 ModuleA template(props){ return `

hello world

` } genClass(type){ return type===1?'clsa':'clsb'; } //父模块 Main template(props){ return `

` } ``` 当模块Main的type发生改变时，ModuleA会渲染，但不会重新编译。 ### 渲染 #### 渲染时机 Nodom的渲染是基于数据驱动的，也就是说只有Model内的数据发生了改变，当前模块才会进行重新渲染的操作。子模块渲染依赖： 1. Model数据改变； 2. 父模块传属性(props)发生改变； 3. 父模块传值发生改变。 #### 手动触发如果需要手动渲染，则需调用`module.active()`进行触发。 ### CSS支持 Nodom对CSS提供额外的支持。在模板中使用`` 元素中直接写入CSS样式，示例代码如下： ```js class Module1 extends Module { template() { return `

Hello nodom!

`; } } ``` 在模板代码中的 `` 元素中通过表达式调用函数返回CSS样式代码串，示例代码如下： ```js class Module1 extends Module { template() { return `

Hello nodom!

`; } css() { return ` .test { color: red; }`; } } ``` 在模板代码中的 `` 元素中通过@import url('CSS url路径')引入CSS样式文件，示例代码如下： ```js template() { return `

Hello nodom!

`; } ``` 对模板代码中需要样式的节点直接写行内样式，示例代码如下： ```js template() { return `

Hello nodom!

`; } ``` **scope属性** 给节点添加该属性后，Nodom会自动在CSS选择器前加前置名。使CSS样式的作用域限定在当前模块及其子模块，不会污染其它模块。示例代码如下： ```js template() { return `

Hello nodom!

`; } ``` 此例中， `.test` css class只对当前模块及其子模块有效。 ### 自定义元素自定义元素需要继承`DefineElement`类，且需要在`DefineElementManager`中注册。 ```js // 定义自定义元素 class MYELEMENT extends DefineElement{ /** * @param node VirtualDom * @param module 所属模块 */ constructor(node,module){ super(node,module); ...... } } // 注册自定义元素 DefineElementManager.add(MYELEMENT); ``` 更多使用参考`/extend/elementinit.ts`文件。 ### 路由 Nodom内置了路由功能，可以配合构建单页应用，用于模块间的切换。 #### 路由初始话如果需要使用路由，则需要在创建路由前引入路由模块，引入方式使用`Nodom.use()`方法。引入路由初始化参数如下： |序号|说明|类型|备注| | - | - | - | - | | 1 | 路由基础路径 | String | 可选，如果配置此项，则浏览器显示的路径以此路径开始| | 2 | 路由进入方法 | Function | 可选，每个路由进入时都将执行此方法，传递参数为 1:module，2:进入时路径 | | 3 | 路由离开时方法 | Function | 可选，每个路由离开时都将执行此方法，传递参数同上 | 初始化示例如下： ```js //启用路由 import {Nodom,Router} from '/dist/nodom.esm.js' Nodom.use(Router,['/router',function(mdl,path){ console.log('enter',mdl,path) },function(mdl,path){ console.log('leave',mdl,path) }]); ``` 初始化后，可以在任意模块中使用 `Nodom['$Router']`访问路由对象。 #### 创建路由 Nodom提供`Nodom.createRoute`方法，用于注册路由。以`Object`配置的形式指定路由的路径、对应的模块、子路由等。以下是一个简单的路由示例： 1. 主模块 ```js class Main extends Module{ template(){ return `

hello

` } } ``` 2. 创建路由 ```js import {Nodom} from '/dist/nodom.esm.js'; //这里默认Hello为一个完整的模块 import Hello from'./route/hello.js'; //创建路由 Nodom.createRoute({ path:'/hello', //指定路由对应的模块 module:Hello }); ``` 当点击hello时，浏览器路径会跳转到 `/hello`，router指令处会显示为Hello模块的内容。上述方式会导致模块提前加载，nodom提供了通过模块路径实现懒加载，修改上例代码如下： ```js Nodom.createRoute({ path:'/hello', // 此处设置模块路径，当执行路由时再加载Hello模块 module:'./route/hello.js' }); ``` #### 注意事项 1. 一个模板中，只能有一个节点带`router`指令。 2. 实现多级路由，需要在不同模块的模板中配置`router`指令。 #### 嵌套路由在实际应用中，通常由多层嵌套的模块组合而成。配置对象内`routes`属性，以数组的方式注册子路由。例如： ```js import {Nodom} from '/dist/nodom.esm.js'; import {Main} from './route/main.js'; Nodom.createRoute({ path:'/main', //指定路由对应的模块 module:Main， routes:[ { path:'/m1', //指定路由对应的模块 module:'./route/m1.js' },{ path:'/m2', //指定路由对应的模块 module:'./route/m2.js' }] }); ``` 当访问`/main/r1`时，先加载Main模块，再加载M1模块。 #### 路由跳转借助`x-route`指令，用户无需手动控制路由跳转。但在一些情况下，需要手动控制路由跳转，跳转方式为： `js //path为需要跳转的路径 Nodom['$Router'].go(path); ` #### 路由传值如果想要实现路由传值，只需在路径内以`:params`配置。例如： ```js import {createRoute} from './nodom.esm.js'; //这里默认Hello为一个完整的模块 import Hello from'./route/hello.js'; //创建路由 createRoute({ path:'/main/:id', //指定路由对应的模块 module:Hello }); ``` Nodom将通过路由传的值放入模块根Model的`$route`中。路由模块中可以通过`$route.data`获取path传入的值。 ```html

跳转至模块Hello

``` #### 路由事件 ##### 单路由事件每个路由可设置： - `onEnter`事件，在路由进入时执行 - `onLeave`事件，在路由离开时执行执行时传入参数： - module（路由绑定的模块） - 当前路径如：从/r1/r2/r3 切换到 /r1/r4/r5。则`onLeave`响应顺序为r3 `onLeave`、r2 `onLeave`。 `onEnter`事件则从上往下执行执行顺序为 r4 `onEnter`、 r5 `onEnter`。例如： ```js import {Nodom} from '/dist/nodom.esm.js'; //这里默认Hello为一个完整的模块 import Hello from'./route/hello.js'; //创建路由 createRoute({ path:'/main', module:Hello, onLeave:function(module,path){ console.log('我执行了onleave函数'); }, onEnter:function(module,path){ console.log('我执行了onEnter函数'); } }); ``` ##### 全局路由事件通过路由初始化时设置，见[路由初始化](#路由初始化)，全局事件针对所有路由有效。 #### 浏览器刷新浏览器刷新时，会从服务器请求资源，nodom路由在服务器没有匹配的资源，则会返回404。通常的做法是: 在服务器拦截资源请求，如果确认为路由，则做特殊处理。假设主应用所在页面是/web/index.html，当前路由对应路径为/webroute/member/center。刷新时会自动跳转到/member/center路由。相应浏览器和服务器代码如下： ##### 浏览器代码 ```js import {Nodom,Module} from './nodom.esm.js'; class Main extends Module{ ... //在根模块中增加onFirstRender事件代码 onFirstRender:function(module){ let path; if(location.hash){ path = location.hash.substr(1); } //默认home ，如果存在hash值，则把hash值作为路由进行跳转，否则跳转到默认路由 path ||= '/home'; Nodom['$Router'].go(path); } ... } ``` ##### 服务器代码服务器代码为[noomi框架](http://www.nodom.cn/webroute/tutorial/www.noomi.cn)示例代码，其它如java、express做法相似。如果Nodom路由以'/webroute'开头，服务器拦截到请求后，分析资源路径开始地址是否以'/webroute/'开头，如果是，则表示是nodom路由，直接执行重定向到应用首页，hash值设定为路由路径(去掉`/webroute`)。 ```js @Instance({ name:'routeFilter' }) class RouteFilter{ @WebFilter('/*',2) do(request:HttpRequest,response:HttpResponse){ const url = require("url"); let path = url.parse(request.url).pathname; //拦截资源 if(path.startsWith('/webroute/')){ //去掉/webrouter response.redirect('/web/index.html#' + path.substr(9)); return false; } return true; } } export{RouteFilter}; ``` 页面路由初始化代码如下： ```js //设置路由基础路径为`/webroute`，此处的onEnber和onLeave可选填 Nodom.use(Router,['/webroute',onEnter,onLeave]); ``` 更多示例参考/examples/route.html,/exampls/modules/route目录 ## 生态 ### NodomUI nodomui npm库，快速搭建应用，http://www.npmjs.com/package/nodomui。 ### Kayaks 数据管理库，用于开发大型项目。 ### Nodom VsCode插件提供模板代码高亮功能，以及其他多种辅助功能。

数据计算

只触发一次

禁止冒泡

代理事件到父对象

常规用法

使用index属性

数组元素不为object时的用法-使用$model作为表达式

匿名递归

命名递归-增加name属性

add

` }else{ return `

none

{{name}}

Hello nodom!

Hello nodom!

Hello nodom!

Hello nodom!

Hello nodom!