pax.widget

pax.widget.init = function( args )

Initialises a PAX widget

Parameters

• model - Model used by the associated widget template
• paxWidgetId - Optionally specify a unique ID that can be used to identify an instance of a widget in the DOM (This is auto generated if not specified)
• template - PAX Template (string) to render
• target - Element to output the widget to

Returns

Object with model and various widget function.

Example

<div style='border: 1px solid grey' id='widget_output'></div>
[:.
    var myWidget = pax.widget.init( {
        model: {
            text: 'Hello, this is my first widget!'
        },
        template: 'Your text is: "[:= text :]".',
        target: pax.$('widget_output')
    } );

    myWidget.render();
:]

This would show the template rendered in the target.  See pax.template for template details.

This will bind functions, by using the class names that you specify in the pax.widget.init method, through the bindElements object

Parameters

Returns

Not applicable

Note

This is an internal method to the pax.widget system, and can only be accessed through the init methods.

Example

pax.widget.init(
    target: target,
    model: model,
    template: args.template,
    bindElements: {
        classNames: {
            'backButtonCSSClass': {
                click: function( e ) {
                    if( model.offset > 0 ) {
                        model.offset -= 1;
                        model.widget.render();
                    }
                }
            }
        }
    }
);

This example shows how to access the classNames binding through the pax.widget.init method.  ‘backButtonCSSClass’ is the CSS class on the button you want to attach the events to, in this case we have a ‘click’ event to attach to the button.

This will bind functions, by using the element ids that you specify in the pax.widget.init method, through the bindElements object

Parameters

Returns

Not applicable

Note

This is an internal method to the pax.widget system, and can only be accessed through the init methods.

Example

pax.widget.init(
    target: target,
    model: model,
    template: args.template,
    bindElements: {
        id: {
            'myButtonID': {
                click: function( e ) {
                    alert('You clicked on the button!');
                }
            }
        }
    }
);

This example shows how to access the id binding through the pax.widget.init method.  ‘myButtonID’ is the element ID of the button you want to attach the events to, in this case we have a ‘click’ event to attach to the button.

This will bind functions, by using the element id + _target id that you specify in the pax.widget.init method, through the bindElements object.  The purpose of this method is to semi-automatically provide a way to have unique elements for instances of the same widget.

Parameters

Returns

Not applicable

Note

This is an internal method to the pax.widget system, and can only be accessed through the init methods.

Example

//  Assume that you have a widget where you have defined a button in the template like so:
//      <input type='button' id='forward_[:= model.target.id :]' value = 'Forward'/>
pax.widget.init(
    target: target,
    model: model,
    template: args.template,
    bindElements: {
        internal: {
            'forward': {
                click: function( e ) {
                    alert('You clicked on the forward button!');
                }
            }
        }
    }
);

This example shows how to access the internal binding through the pax.widget.init method.  The ‘forward’ key referes to an element that is defined as “forward_” + model.target.id

This creates an ajax based widget based on the widget object. ie: it adds a controller, and a server request method.

pax.widget.ajax.init = function( url, args )

This creates an ajax based widget, using pax.widget.init as a base widget object. ie: it adds an ajax controller, and a server request method.

Parameters

• url - The URL that the widget sends it’s requests to.
• model - Model used by the associated widget template
• paxWidgetId - Optionally specify a unique ID that can be used to identify an instance of a widget in the DOM (This is auto generated if not specified)
• template - PAX Template (string) to render
• templateURL - Optional URL to load a template from
• target - Element to output the widget to.

Returns

Object with model and various widget function.

Example

<div style='border: 1px solid grey' id='ajax_widget_output'></div>
[:.
    pax.widget.ajax.init( '../examples/widget_introduction_example3.txt', {
        target: pax.$('ajax_widget_output')
    } ).serverRequest();
:]

This would show the template rendered in the target.  See pax.template for template details.  Also, be sure to read the widget introduction article!