今天介紹一下使用Aurelia binding 模塊綁定HTML屬性/事件的方式。我們依然使用之前創建的代碼例子。 Aurelia binding 綁定屬性或者方法的通用模式就是 XXX.command="expression" XXX如 屬性 value, 如方法click,blur comman ...
今天介紹一下使用Aurelia binding 模塊綁定HTML屬性/事件的方式。我們依然使用之前創建的代碼例子。
Aurelia binding 綁定屬性或者方法的通用模式就是 XXX.command="expression"
XXX如 屬性 value, 如方法click,blur
command 如 bind, two-way, one-time 等
expression 即js表達式
一. 綁定屬性
attribute.command=”expression”
attribute: html屬性.
command: one of Aurelia's attribute binding commands:
one-time: 單向綁定，數據模型=>視圖, 僅一次.
to-view / one-way: 單向綁定，數據模型=>視圖
from-view: 單向綁定，視圖=>數據模型.
two-way: 雙向綁定，數據模型<=>視圖
bind: 自動選擇綁定模式，表單控制項是two-way，其他控制項基本是to-view方式.
expression: js表達式.
通常自己寫組件的話，使用bind就行了，如果只需要用來顯示數據，並且不會修改，可以使用one-time來提高渲染效率
自己寫幾次比較一下就能掌握使用方法了。
二. 事件綁定方式
event.command="expression"
event: DOM事件，但書寫的時候不包含'on'.
command:
trigger: 直接向元素綁定事件，當事件觸發，handler會執行
delegate: 向頂層元素綁定事件，當事件觸發時（冒泡），會自行找到初始觸發元素.
capture: 向頂層元素綁定事件，當事件觸發時，在事件捕獲過程中觸發
expression: js 表達式. 使用$event 可以在綁定的函數中獲取事件對象
在用delegate和trigger綁定handler的時候，Aurelia預設調用preventDefault()，如果不想調用preventDefault, 那麼在handler里返回true即可。
delegate VS trigger
delegate和trigger很相像，那麼什麼時候用delegate，什麼時候用trigger呢？
簡單點說就是能使用delegate就使用delegate 除非不能使用delegate。
delegate只適用於會冒泡的事件，如click， 像blur, focus 等不會冒泡的事件，delegate不適用；這個時候就要使用trigger
當你的button遇到下麵兩種情況的時候，就需要使用trigger
1. button需要被disable
2. button的元素內容是由其他的元素組成（非純文本）
在ios中遇到如下情況使用trigger
ios 除了元素a, button, input 和select，其他元素click事件不會冒泡。如果你對一個div綁定click事件，那麼就需要使用trigger。
三. 方法綁定方式
在自定義組件的時候，我們可能會想要重寫組件的某個方法，或者為組件添加不同的回掉，這時候我們就可以為自定義組件添加一個bindable的屬性來
綁定一個方法。
XXX.call="function()"
XXX: 是你在組件里定義的bindable 屬性
call是特定的語法
function 是你在父組件中定義的方法，並想要傳遞給自定義組件
在自定義組件內部定義了兩個bindable的屬性go, callback，當外部父組件添加該組件的時候，可以向go/callback 添加定義了的方法。
其實如果瞭解箭頭函數的寫法的話，就可以快速理解這個function 的綁定方式。 property = ()=> {}
四. reference
Aurelia binding 模塊可以允許用戶向dom元素（或其他元素）添加一個reference
寫法 XXX.ref ="expression"
element.ref="expression": 向dom元素添加一個reference（同 ref="expression")
attribute-name.ref="expression": 向自定義屬性的view-model添加一個reference （custom-attribute 會在之後的篇章介紹）
view-model.ref="expression": 向自定義元素的view-model 添加reference
view.ref="expression": 向自定義元素的view實例添加reference （非html元素）
controller.ref="expression": 向自定義元素的controller 添加reference
註意： 這邊dom的ref 是添加在自定義元素內部的，view, viewmodel, controller 的ref是添加在父組件上
這邊文本框後面顯示的是文本框里的內容，這個值是從文本框的ref上拿到的
控制台里的輸出，可以看到viewmodel對象，view以及controller，這就是通過添加的ref 拿到的
五. String Interpolation
string interpolation 字元串插補，如果熟悉模板字元串語法的話就很容易上手使用這個功能。
語法： ${property}
如果屬性 property 對應的值是null 或者undefined，那麼會顯示空字元串。
字元串插補的預設綁定方式是to-view.
也可以顯示的通過textcontent.bind 的方式去顯示綁定內容, 也可以把bind 替換為其他綁定方式，如to-view, one-way, two-way...
六. Contextual Properties
binding模塊可以根據不同的上下文，來獲取綁定在你的模板（自定義組件等別稱）上的屬性
$this- view-model$parent- Explicitly accesses the outer scope from within a compose or repeat template. You may need this when a property on the current scope masks a property on the outer scope. Chainable- eg$parent.$parent.foois supported.$event- delegate或者trigger 綁定的dom事件$index- 元素在一個迴圈重覆的模板中的索引$first- 如果元素是迴圈中的第一個元素，那麼這個值為true$last- 如果是最後一個元素，那麼這個值為true$even- 如果索引是偶數，那麼這個值為true$odd- 如果索引是奇數，那麼這個值為true
七. 表達式語法 Expression Syntax
基本JS里的表達式，都能通用。
與符號 &代表的是Binding Behavior (而不是二進位與)- 或符號
|代表的是ValueConverter(而不是二進位或)
