上方廣告

2017年5月31日 星期三

[Angular學習紀錄] Template binding property or attribute?

Attribute 和 Property 這兩個英文單字翻譯成中文都稱作 "屬性"。

而且也應該知道Angular可以透過 "屬性" 的綁定,讓Component和Html Template之間可以進行溝通,但常常有時候會發生一些特例,因而讓應用程式無法正常的運作。

舉個簡單的例子,表格欄位物件 td 內有一個合併儲存格 colspan 的屬性,它是一個可用的屬性(Html Attribute),但是實際將該屬性綁定後卻出現錯誤,為何會發生這種錯誤?



回過頭來必須先了解 AttributeProperty 之間的定義,在此簡單的說明如下 :
  • Attribute,是由HTML來定義的(這裡指的是HTML標籤內的屬性),一般來說它的值應該都為字串。
  • Property,是由 DOM (Document Object Model)所定義的,通常都使用JavaScript來控制它。
瀏覽器會在文件載入時開始剖析Html,並為每個HTML Attribute建立對應的DOM Property,大部分的情況會是一對一的關係,通常Attribute名稱是什麼,Property名稱也會是什麼,如果標籤上有設定某個Attribute,則Attribute值為何,Property值也就為何。例如 Attribute的name 會對應 DOM的name。

儘管很多時候是一對一的關係,但仍有許多特例的存在,例如attribute的class對應到dom的className,下圖就是分別透過Attribute和Property設定值的結果(特例)。


正常情況下,在剖析完成並初始化Property後,Attribute的任務就算結束了,如果直接修改DOM上的Property,Attribute中對應的屬性並不會有變化,舉個例子,value這個屬性,下圖範例初始化輸入框的Value為 "Hello Lawrence",此時再輸入框內輸入任意資料,再點擊按鈕,觀看結果可以發現,此時的HTML Attribute依然一開始設定的資料。除非使用setAttribute的方法才可以將值改變(參考下圖綠框處)。

PS. 之所以會說正常情況下Attribute的任務在初始值設定完就結束了是因為,某些條件下可能需要點擊了某些按鈕會產生一些CSS的特效的時候,會使用setAttribute()再attributes中設定屬性,此時相對應的DOM特性值也會改變。

好了,前面寫了這麼多說明只是想要表達在Angular中的 "屬性" 指的是哪個部分。因此順道一提,在Angular中的 "屬性綁定"指的都DOM的Property,原則上都沒有跟HTML Attribute有什麼直接的關聯。白話文就是,Angular的屬性是在設定 DOM 元素、組件和指令的Property。


PS. 組件和指令的Property牽扯Angular其它範圍,在本文內暫不討論。



本文撰寫時Angular版本為v4.0

參考網站
Angular官網(模板绑定語法)
DOM 中 Property 和 Attribute 的区别
[轉載] 屬性(Attribute)與特性(Property)