YUI 3.x Home -

YUI Library Examples: Attribute: Read-Only and Write-Once Attributes

Attribute: Read-Only and Write-Once Attributes

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.

View example in new window.

Construct o1, setting initial values for both foo and bar in the constructor:

Try setting values again, after they've been set once:

Call a MyClass method, which sets foo internally (using _set):

ReadOnly And WriteOnce

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.

Configuring ReadOnly And WriteOnce Attributes

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:

  1. // Setup a custom class with attribute support
  2. function MyClass(cfg) {
  3.  
  4.     // Attribute configuration
  5.     var attrs = {
  6.         "foo" : {
  7.             value: "Default Foo",
  8.             readOnly: true
  9.         },
  10.  
  11.         "bar" : {
  12.             value: "Default Bar",
  13.             writeOnce: true
  14.         }
  15.     }
  16.  
  17.     this.addAttrs(attrs, cfg);
  18. }
// 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);
}

Attempting To Set Values

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:

  1. var fooVal = Y.one("#writeInitial .fooVal").get("value");
  2. var barVal = Y.one("#writeInitial .barVal").get("value");
  3.  
  4. o1 = new MyClass({
  5.     foo: fooVal,
  6.     bar: barVal
  7. });
  8.  
  9. displayValues(o1, "Attempt to set initial values in constructor", 
  10.                 "#writeInitial .example-out");
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");

We then attempt to set values for both attributes again, using set, and see that niether of the values are modified:

  1. var fooVal = Y.one("#writeAgain .fooVal").get("value");
  2. var barVal = Y.one("#writeAgain .barVal").get("value");
  3.  
  4. // Attempt to reset values:
  5. o1.set("foo", fooVal);
  6. o1.set("bar", barVal);
  7.  
  8. displayValues(o1, "Attempt to set values again, using set", 
  9.                 "#writeAgain .example-out");
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");

Setting The State Of ReadOnly Values Internally

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:

  1. MyClass.prototype.doSomething = function(val) {
  2.     // ... Do something which requires
  3.     // MyClass to change the value
  4.     // of foo ...
  5.  
  6.     // Host code can reset value of 
  7.     // readOnly attributes interally,
  8.     // by working with the private _set
  9.     // property
  10.  
  11.     this._set("foo", val);
  12. };
  13.  
  14. ...
  15.  
  16. var val = Y.one("#writeInternally .fooVal").get("value");
  17.  
  18. // Call method, which sets foo internally...
  19. o1.doSomething(val);
  20.  
  21. displayValues(o1, "Set value of foo (readOnly) interally", 
  22.                 "#writeInternally .example-out");
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");

More Attribute Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings