欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Aurelia 创建模板

程序员文章站 2022-06-30 17:55:46
今天介绍一下Aurelia创建模板的三种方式。 模板既可以作为页面也可以作为组件。 1. View+View Model Aurelia的模板通常由一个html文件和一个同名的ts或js文件组成,文件的命名方式需要是dash-case,比如“my-view.html, my-view.ts; my- ......

今天介绍一下aurelia创建模板的三种方式。

模板既可以作为页面也可以作为组件。

1. view+view model

aurelia的模板通常由一个html文件和一个同名的ts或js文件组成,文件的命名方式需要是dash-case,比如“my-view.html, my-view.ts; my-component.html,my-component.js"

aurelia模板的view是一个html文件,这个html文件必然被<template>标签包裹,一个简单的view如下

Aurelia 创建模板

创建完view之后,添加一个同名的ts或js文件作为view-model。

Aurelia 创建模板

Aurelia 创建模板

那么如何引用这个模板呢?

有两种方式:

一种是在要使用该模板的地方,直接引用,需要注意的是引入的标签必须成对,不能使用单标签<require from... /> 的方式。

Aurelia 创建模板

 

另一种是把该模板设置为全局资源,那么在其他文件中直接使用即可,不用再次引用。

 Aurelia 创建模板

Aurelia 创建模板

 

两种方式都能得出下图的结果

Aurelia 创建模板

2. html only view

如果不需要处理复杂的逻辑,那么就可以创建一个只有html文件的模板,不再需要view-model。

比如创建一个仅仅用于显示绑定数据的组件。

虽然没有view-model,我们依然可以为这个模板绑定value

引用html only element的时候有一点不同,之前引入模板不需要加上详细的扩展名,但是如果引用的是html only的element 那么就必须把扩展名.html 加上。

如果想给html only element 绑定value的话,那么需要在html only 模板里加上bindable值,并且可绑定的属性间用逗号 “,” 分割

在调用该模板,并绑定数值时,需要把属性名写为dash-case 的形式

Aurelia 创建模板

 

 Aurelia 创建模板

Aurelia 创建模板

3. no view element

除了创建html only element 之外,我们还可以创建单独的view-model 既 no-view element。

当我们不需要视图,只需要处理一些逻辑或者调用其它的js库做一些事情的时候,我们就可以使用no view element。

no view element 是通过装饰器 @noview 来申明实现的。

当添加@noview装饰器时,就告诉编译器,该模板不需要加载相对应的html文件,也不需要做任何render工作。

新建一个js/ts 文件如下, 接着在其他地方引用该组件,并绑定相应的value,这边通过点击按钮来增加age,当age大于60时,就会弹出提示信息。

Aurelia 创建模板

Aurelia 创建模板

 

Aurelia 创建模板

 

所以如果只需要某个模板来处理一些逻辑,或者调用第三方库的时候,就可以创建一个no view element.

 

以上就是简单的介绍了三种模板的创建方式。