Core idea: Many control properties invoke a chain of jQuery functions to perform their work. You can define such properties concisely with a QuickUI helper function called Control.chain().

Consider the definition for a property foo() like this, which gets or sets the content of an element with id #foo.

        foo: function( value ) {
            if ( value === undefined ) {
                return this.$foo().content();
            } else {
                this.$foo().content( value );
                return this;
            }
        }

Both the getter and setter forms of the function apply the $foo() function to “this”, then apply the content() function to the result. The setter form takes the extra step of passing the supplied value to the last function in the chain. The setter form also returns “this” to support chaining.

The above property definition is so common that QuickUI provides a helper function called Control.chain(). The above code can be replaced by:

        foo: Control.chain( "$foo", "content" )

Control.chain() returns a function that will apply the given sequence of named functions to “this”. If called as a setter, the function will pass the supplied value to the last function in the chain, and will also return “this” so the function can be chained.

An argument can be passed to a named function by following the name with a “/”:

        fooColor: Control.chain( "$foo", "css/color" )

returns a function that gets/sets the color of the element with ref “foo”.

The demo code defines the class’ name() property to get or set the content of the span with ref “name”.

Your goal: Simplify the definition of name() to a single line by using Control.chain().