今天介绍一下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如下

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

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

有两种方式:

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

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

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

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 的形式

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时,就会弹出提示信息。

注意:如果用的是脚手架搭建的基于ts的项目,此处应该不会报错。

如果使用的是自己通过webpack一步步搭建出来的方式,那么需要安装babel-loader以及使用相应的插件来使得decorators正常工作,配置如下

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

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

Aurelia 创建模板的更多相关文章

  1. Orchard之创建模板

    orchard创建模板的两种基本方式: 第一种:通过候补创建(需要用到候补神器): 第二种:通过Shape Tracing创建:

  2. Django创建模板、URL模式、创建视图函数

    1.在应用目录下创建模板(templates目录) 在模板目录下创建archive.html <!DOCTYPE html> <html lang="en"> ...

  3. Sitecore CMS中创建模板

    如何在Sitecore CMS中创建模板. 在/sitecore/templates选择应创建模板的文件夹中. 注意:在多站点项目中,通常会在模板所属的网站名称的/sitecore/templates ...

  4. 使用MyGeneration创建模板:介绍(翻译)

    原文信息 原文地址 原文作者信息: Justin Greenwood MyGeneration Software http://www.mygenerationsoftware.com April 2 ...

  5. 36.创建模板mylist

    node.h #pragma once //创建模板 template <class T> class Node { public: T t;//数据 Node *pNext;//指针域 ...

  6. 使用powercli创建模板与克隆虚机

    用powercli练练手,需从实际案例出发,本节将使用powercli写两个demo,一个是创建模板,并根据模板创建新的虚机:另一个demo是克隆虚机. [注意] 1.创建模板与克隆操作只能在vcen ...

  7. angular4 动态创建组件 vs 动态创建模板

    实现  模拟场景:页面上"帮助"按钮的点击触发帮助文档的弹出框,且每个页面的帮助文档不一样 因此弹出框里的帮助文档是一个动态模板而不是动态组件 以下comp均代表Type类型的动态 ...

  8. 使用Eclipse创建模板并格式化代码

    eclipse设置方式: window-preferences-->java-code Style-formatter 在编写完代码后使用代码格式化程序对代码进行格式化,有利于版本冲突时进行对比 ...

  9. Xcode5 创建模板和UIView 关联XIB

    转自:http://www.cnblogs.com/china-ldw/p/3533896.html 在做ios应用开发的过程,难免遇到要创建 子view 和 自定义view的时候,归根到底,我们需要 ...

随机推荐

  1. 816. Ambiguous Coordinates

    We had some 2-dimensional coordinates, like "(1, 3)" or "(2, 0.5)".  Then, we re ...

  2. 刺透内网的HTTP代理

    从偶然出发 在做测试的时候发现了这样一个漏洞,原请求报文如下: GET / HTTP/1.1 Host: attack_website [... HEADER ...] ... 当时最初目的是想测SS ...

  3. 安全圈玩起了直播,"学霸”带你玩转CTF

    [i春秋]安全圈玩起了直播,"学霸”带你玩转CTF 跟着学霸(汪神)打CTF,摸清CTF套路 汪神,是浙江大学电气工程系的“风云人物”,曾因首度破解特斯拉汽车安全系统而名声大噪.本套题目是自 ...

  4. ElasticSearch写入数据的工作原理是什么?

    面试题 es 写入数据的工作原理是什么啊?es 查询数据的工作原理是什么啊?底层的 lucene 介绍一下呗?倒排索引了解吗? 面试官心理分析 问这个,其实面试官就是要看看你了解不了解 es 的一些基 ...

  5. C 线性表的链式存储实现及插入、删除等操作示例

    一.链式存储的优势 线性表的存储可以通过顺序存储或链式存储实现,其中顺序存储基于数组实现(见本人上一篇博客),在进行插入删除等操作时,需对表内某一部分元素逐个移动,效率较低.而链式结构不依赖于地址连续 ...

  6. ubuntu系统给用户增加root权限

    在安装软件包的时候,会提示没有sudo权限. eg : sudo apt-get install golang 解决方法 进入有root权限的用户 eg: su root 并根据提示输入密码 sudo ...

  7. SPA架构的优点和缺点以及一些思考

    SPA是什么? 全称是单页面应用. 一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载. 用术语“单页”就是因为页面在初始化加载后 ...

  8. SQLServer脚本编写

    临时接到通知,需要临时编写一个SQL Server的脚本,供出差的同事使用一下. 我当时心想这个SQL Server脚本听都没听说过,但是组织说决定就是你了,那我就只能硬着头皮上了. 脚本实现的功能比 ...

  9. Xamarin.Android 解决打开软键盘导致底部菜单上移问题

    在界面布局中有EditText控件,该控件一旦获取焦点则打开软键盘,如果布局中有底部菜单,那么底部菜单可能会被软键盘顶在其上面,看如下效果: 解决方法:在活动绑定界面之前写上下段代码即可 Window ...

  10. logstash常用插件解析

    官方地址:https://www.elastic.co/guide/en/logstash-versioned-plugins/current/index.html 配置文件写法: # 日志导入inp ...