Attribute类用于向一个类添加属性,它给类增加了set和get函数用于操作属性值,同时还
支持change事件以便监视属性的变化,此外,还可以自定义属性的setter、getter和校验
方法,可以定义属性为只读或者一次写(write-once)
1. 要使用Attribute,首先要引入YUI3的种子文件:
然后加载相应模块:
2. Attribute类是用来扩张一个既存的类,使其具有属性管理功能的,以下是将MyClass扩张
的示例代码:
3. 增加属性
一旦一个类扩张了Attribute功能,就可以使用addAttrs批量添加属性,或者使用addAttr一个一
个地添加属性,以下是批量添加的例子:
可以在new这个类或者new之后用set方法对属性赋值:
4. 属性配置属性(Attribute configuration properties)
可以对属性(Attribute)进行配置的属性(properties)参见下表,所有属性都是可选的,也是
大小写敏感的:
value: 默认值
valueFn:函数。返回值会被作为属性的值
getter:函数
setter:函数
validator:函数。在setter前被调用,用来校验数据
readOnly:布尔值
writeOnce:布尔值。0-不广播;1-广播到YUI实例;2-广播到YUI实例和YUI global
lazyAdd:布尔值
cloneDefaultValue:可以为"shallow", "deep", true, false。仅在Base的ATTRS中使用。
以下是在addAttr中使用的例子:
5. 属性变化事件
属性变化事件是一种用户自定义事件,其类型为"[attributeName]Change",例如定义了一个
属性"attrA",那么它的变化事件就是"attrAChange"。
定义事件监听器时可以使用两种方法:on和after。其中用on注册的监听器在变化发生前调用,
我们可以在这里检查数据的合法性,并用Event的preventDefault()方法拒绝对属性的修改。而
用after注册的监听器在事件发生后调用。
以下是对属性"enabled"定义变化事件监听器的示例代码:
事件监听器的第一个参数是以Event对象,它具有以下的属性和方法:
newVal
prevVal
attrName
subAttrName
preventDefault()
stopImmediatePropagation():可以在on和after监听器中使用,用于停止事件在监听器栈中的传播
6. 属性设置流程图(很值得参考)
[img]http://dl.iteye.com/upload/attachment/214160/810e3a4c-4e84-365c-8a2d-faa06d557942.png[/img]
7. 子属性(sub attribute)
属性可以包含子属性,我们可以在set/get方法中使用由"."标识的完整属性名来操作子属性。
以下是set的例子:
以下是get的例子:
支持change事件以便监视属性的变化,此外,还可以自定义属性的setter、getter和校验
方法,可以定义属性为只读或者一次写(write-once)
1. 要使用Attribute,首先要引入YUI3的种子文件:
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
然后加载相应模块:
YUI().use('attribute', function(Y) {
});
2. Attribute类是用来扩张一个既存的类,使其具有属性管理功能的,以下是将MyClass扩张
的示例代码:
YUI().use("attribute", function(Y) {
function MyClass() {
...
}
Y.augment(MyClass, Y.Attribute);
});
3. 增加属性
一旦一个类扩张了Attribute功能,就可以使用addAttrs批量添加属性,或者使用addAttr一个一
个地添加属性,以下是批量添加的例子:
function MyClass(userValues) {
var attributeConfig = {
attrA : {
// attrA的配置,可配置的属性参见【4.属性配置属性】
},
attrB : {
// attrB的配置
}
};
this.addAttrs(attributeConfig, userValues);
};
可以在new这个类或者new之后用set方法对属性赋值:
var o = new MyClass({
attrA:5
});
o.set("attrB", "Hello World!");
4. 属性配置属性(Attribute configuration properties)
可以对属性(Attribute)进行配置的属性(properties)参见下表,所有属性都是可选的,也是
大小写敏感的:
value: 默认值
valueFn:函数。返回值会被作为属性的值
getter:函数
setter:函数
validator:函数。在setter前被调用,用来校验数据
readOnly:布尔值
writeOnce:布尔值。0-不广播;1-广播到YUI实例;2-广播到YUI实例和YUI global
lazyAdd:布尔值
cloneDefaultValue:可以为"shallow", "deep", true, false。仅在Base的ATTRS中使用。
以下是在addAttr中使用的例子:
this.addAttr("attrA", {
value: 5,
setter: function(val) {
return Math.min(val, 10);
},
validator: function(val) {
return Y.Lang.isNumber(val);
}
});
5. 属性变化事件
属性变化事件是一种用户自定义事件,其类型为"[attributeName]Change",例如定义了一个
属性"attrA",那么它的变化事件就是"attrAChange"。
定义事件监听器时可以使用两种方法:on和after。其中用on注册的监听器在变化发生前调用,
我们可以在这里检查数据的合法性,并用Event的preventDefault()方法拒绝对属性的修改。而
用after注册的监听器在事件发生后调用。
以下是对属性"enabled"定义变化事件监听器的示例代码:
o.on("enabledChange", function(event) {
...
});
o.after("enabledChange", function(event) {
...
});
事件监听器的第一个参数是以Event对象,它具有以下的属性和方法:
newVal
prevVal
attrName
subAttrName
preventDefault()
stopImmediatePropagation():可以在on和after监听器中使用,用于停止事件在监听器栈中的传播
6. 属性设置流程图(很值得参考)
[img]http://dl.iteye.com/upload/attachment/214160/810e3a4c-4e84-365c-8a2d-faa06d557942.png[/img]
7. 子属性(sub attribute)
属性可以包含子属性,我们可以在set/get方法中使用由"."标识的完整属性名来操作子属性。
以下是set的例子:
o.set("strings", {
ui : {
accept_label : "OK",
decline_label : "Cancel",
},
errors : {
e1000 : "Not Supported",
e1001 : "Network Error"
}
});
o.set("strings.ui.accept_label", "Yes");
o.set("strings.ui.decline_label", "No");
以下是get的例子:
var lbl = o.get("strings.ui.accept_label");