1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<style type="text/css" scoped>
.example-out .myclass-attrs {
font-family:courier;
margin-top:2px;
}
.example-out .myclass-title {
font-weight:bold;
font-family:arial;
color:#8dd5e7;
margin-top:5px;
margin-bottom:3px;
}
.example-out {
overflow:auto;
border:1px solid #000;
color:#ffffff;
background-color:#004C6D;
margin-top:5px;
margin-bottom:20px;
height:8em;
padding:2px 2px 2px 5px;
}
#writeInitial label, #writeAgain label, #writeInternally label {
font-weight:900;
}
#writeInitial .fooVal, #writeAgain .fooVal, #writeInternally .fooVal {
width:9em;
}
#writeInitial .barVal, #writeAgain .barVal, #writeInternally .barVal {
width:9em;
}
#writeInitial p, #writeAgain p, #writeInternally p {
margin-top:0.2em;
margin-bottom:0.2em;
color:#004C6D;
font-size:108%;
}
</style>
<div class="intro">
<p>Attributes can be configured to be `readOnly`, stopping them from being modified by the end user, or `writeOnce` allowing them to be set by the end user, but only once. This example demonstrates how to setup attributes for your class as `readOnly` or `writeOnce` attributes, and shows how their behavior differs when the end user attempts to set their values.</p>
</div>
<div class="example">
{{>attribute-rw-source}}
</div>
<h2>ReadOnly And WriteOnce</h2>
<p>Attribute supports the ability to configure attributes to be `readOnly` or `writeOnce`. `readOnly` attributes cannot be set by the end user, either through initial values passed to the constructor, or by invoking the `set` method. `writeOnce` attributes on the other hand, can be set by the user, but only once, either during initialization or through a call to `set`. Once a value is established for a `writeOnce` attribute, it cannot be reset to another value by the user.</p>
<h2>Configuring ReadOnly And WriteOnce Attributes</h2>
<p>This example sets up a custom class, `MyClass`, with two attributes, `foo` and `bar`. `foo` is configured to be a `readOnly` attribute, and `bar` is configured to be a `writeOnce` attribute:</p>
```
// Setup a custom class with attribute support
function MyClass(cfg) {
// Attribute configuration
var attrs = {
"foo" : {
value: "Default Foo",
readOnly: true
},
"bar" : {
value: "Default Bar",
writeOnce: true
}
}
this.addAttrs(attrs, cfg);
}
```
<h2>Attempting To Set Values</h2>
<p>We first attempt to set values for both attributes in the constructor (used to intialize the attributes) and see that only `bar`, the `writeOnce` attribute, gets set to the user provided value:</p>
```
var fooVal = Y.one("#writeInitial .fooVal").get("value");
var barVal = Y.one("#writeInitial .barVal").get("value");
o1 = new MyClass({
foo: fooVal,
bar: barVal
});
displayValues(o1, "Attempt to set initial values in constructor",
"#writeInitial .example-out");
```
<p>We then attempt to set values for both attributes again, using `set`, and see that niether of the values are modified:</p>
```
var fooVal = Y.one("#writeAgain .fooVal").get("value");
var barVal = Y.one("#writeAgain .barVal").get("value");
// Attempt to reset values:
o1.set("foo", fooVal);
o1.set("bar", barVal);
displayValues(o1, "Attempt to set values again, using set",
"#writeAgain .example-out");
```
<h2>Setting The State Of ReadOnly Values Internally</h2>
<p>Although the user cannot update the value of `readOnly` attributes, it maybe neccessary for the host object to update it's value internally. The example shows how this can be done, using the private `_set` property on the host:</p>
```
MyClass.prototype.doSomething = function(val) {
// ... Do something which requires
// MyClass to change the value
// of foo ...
// Host code can reset value of
// readOnly attributes interally,
// by working with the private _set
// property
this._set("foo", val);
};
...
var val = Y.one("#writeInternally .fooVal").get("value");
// Call method, which sets foo internally...
o1.doSomething(val);
displayValues(o1, "Set value of foo (readOnly) interally",
"#writeInternally .example-out");
```
<h2>Complete Example Source</h2>
```
{{>attribute-rw-source}}
```