2013
Apr
17
YUI 3 中有一個最基本的 Module 叫 Attribute，主要功能是存取變數值，例如我想要設定一個變數，那我可以使用 Y.Attribute 的功能，建立一個 Attribute Object, 用他來管理我的變數設定 。
Y.Attribute 可以在 new Object 時， Initialize 一些 attribute 進去。
Simple Attribute
- var GB = new Y.Attribute({
- "maxWidth": { value: "1000px"},
- "maxHeight": {value: "800px"}
- });
- console.log(GB.get("maxWidth"));// output 1000px
- GB.set("maxWidth", "900px");
- console.log(GB.get("maxWidth")); // output 900px
Attribute event : value change
YUI 3 的 attribute 還有個 event 的管理功能，當某一個變數的內容變更時，我可以指定它去觸發某一個事件，例如上一個範例中的 maxWidth 被變更時，我可能會希望視窗的尺寸也跟著改變。
講到 event ，就要先知道他的 event 名稱，假設我定義一個 Attribute 變數名稱為 attrName，則這個變數的內容變更時，它的 Event 名稱為 「attrNameChange」，change 就是指變數被變更的意思，在 change 前面再加上 attribute 名稱，就是他的 event 了。
為了讓這個 Event 能夠順利觸發，我們必須先幫它綁定 function，綁定方式就是使用 YUI on 來完成。
Bind attribute event 範例
- var A = new Y.Attribute({
- "attrName": {
- value: "test",
- writeOnce: false
- }
- });
- A.on("attrNameChange", function (e) {
- Y.log("Attribute name = " + e.attrName);
- Y.log("Original value = " + e.prevVal + ", New value = " + e.newVal);
- Y.log("event trigger" + e.data3); Y.log(e);}, {data3:2}
- );
最後再透過 AttributeObject.set(key, value); 去修改 attribute 內容，這樣 YUI 就會自動去觸 attrChange 的 event 而執行我們指定的 function 。
全部的程式範例
source code 範例
- <script>
- YUI().use("node", "lang", "base", "attribute", "attribute-observable", function (Y) {
- var A = new Y.Attribute({
- "attrName": {
- value: "test",
- writeOnce: false
- }
- });
- A.on("attrNameChange", function (e) {
- Y.log("Attribute name = " + e.attrName);
- Y.log("Original value = " + e.prevVal + ", New value = " + e.newVal);
- Y.log("event trigger" + e.data3); Y.log(e);}, {data3:2}
- );
- //change it
- A.set("attrName", "test2");
- });
- </script>
其他相關
- Attribute Event 的相關程式碼寫在 attribute-observable 裡。
- http://yuilibrary.com/yui/docs/api/files/attribute_js_AttributeObservable.js.html
回應 (Leave a comment)