今天介紹一下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如下
創建完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.
以上就是簡單的介紹了三種模板的創建方式。
