Use

canViewCallbacks.attr is used to add custom behavior to elements that contain a specified html attribute. Typically it is used to mixin behavior (whereas tag is used to define behavior).

The following example adds a jQueryUI tooltip to any element that has a tooltip attribute like <div tooltip="Click to edit">Name</div>.

Listening to attribute changes

In the previous example, the content of the tooltip was static. However, it’s likely that the tooltip’s value might change. For instance, the template might want to dynamically update the tooltip like:

<button tooltip="{{deleteTooltip()}}">
  Delete
</button>

Where deleteTooltip() changes depending on how many users are selected:

{
    deleteTooltip: function() {
        const selectedCount = selected.length;
        if ( selectedCount ) {
            return "Delete " + selectedCount + " users";
        } else {
            return "Select users to delete them.";
        }
    }
}

The attributes event can be used to listen to when the tooltip attribute changes its value like:

var domMutateEvents = require("can-dom-mutate/events/events");
domEvents.addEvent(domMutateEvents.attributes);


canViewCallbacks.attr( "tooltip", function( el, attrData ) {

    // A helper that updates or sets up the tooltip
    const updateTooltip = function() {
        $( el ).tooltip( {
            content: el.getAttribute( "tooltip" ),
            items: "[tooltip]"
        } );
    };

    // When the tooltip attribute changes, update the tooltip
    domEvents.addEventListener( el, "attributes", function( ev ) {
        if ( ev.attributeName === "tooltip" ) {
            updateTooltip();
        }
    } );

    // Setup the tooltip
    updateTooltip();

} );

To see this behavior in the following demo, hover the mouse over the “Delete” button. Then select some users and hover over the “Delete” button again:

Reading values from the scope.

It’s common that attribute mixins need complex, observable data to perform rich behavior. The attribute mixin is able to read data from the element’s scope. For example, toggle and fade-in-when will need the value of showing in:

<button toggle="showing">
    {{#if(showing)}}Hide{{else}}Show{{/if}} more info
</button>
<div fade-in-when="showing">
    Here is more info!
</div>

These values can be read from attrData’s scope like:

attrData.scope.attr( "showing" );

But often, you want to update scope value or listen when the scope value changes. For example, the toggle mixin might want to update showing and the fade-in-when mixin needs to know when the showing changes. Both of these can be achieved by using compute to get a get/set compute that is tied to the value in the scope:

const showing = attrData.scope.compute( "showing" );

This value can be written to by toggle:

canViewCallbacks.attr( "toggle", function( el, attrData ) {
    const attrValue = el.getAttribute( "toggle" );
    const toggleCompute = attrData.scope.compute( attrValue );

    $( el ).click( function() {
        toggleCompute( !toggleCompute() );
    } );
} );

Or listened to by fade-in-when:

canViewCallbacks.attr( "fade-in-when", function( el, attrData ) {
    const attrValue = el.getAttribute( "fade-in-when" );
    const fadeInCompute = attrData.scope.compute( attrValue );

    // handler for when the observable changes
    const handler = function( event, newVal, oldVal ) {
        if ( newVal && !oldVal ) {
            $( el ).fadeIn( "slow" );
        } else if ( !newVal ) {
            $( el ).hide();
        }
    };

    fadeInCompute.on( "change", handler );

    // ...

} );

When you listen to something other than the attribute’s element, remember to unbind the event handler when the element is removed from the page:

domEvents.addEventListener.call( el, "removed", function() {
    fadeInCompute.off( "change", handler );
} );

When to call

canViewCallbacks.attr must be called before a template is processed. When using can-stache to create a renderer function, canViewCallbacks.attr must be called before the template is loaded, not simply before it is rendered.

//Call canViewCallbacks.attr first
canViewCallbacks.attr( "tooltip", tooltipFunction );

//Preload a template for rendering
const renderer = stache( "<div tooltip='Hi There'>...</div>" );

//No calls to canViewCallbacks.attr after this will be used by `renderer`