Skip to content

Ability to customize update method for attributes #212

@generalov

Description

@generalov

It would be useful ability to set dom element attributes with custom method.

The current implementation uses $.attr() which has issues with case sensitive attributes.

I have HTML with embedded SVG:

<div>
  <svg viewBox="0 0 100 100"></svg>
</div>

And I want to bind attribute viewBox on svg element with stickit:

   bindings: {
        ':el': {
            attributes: [{
                name: 'viewBox',
                observe: ['width', 'height'],
                onGet: function(val) {
                    return '0 0 ' + val[0] + ' ' + val[1];
                }
            }]
        }
    }

This does not work as expected beacause it adds another attribute with name in lowcase:

 <svg viewBox="0 0 100 100" viewbox="0 0 100 100"></svg>

The name viewbox is meanless for SVG. The issue due method which jQuery.attr() function handles case sensitivity for attributes and this is "won't fix" http://bugs.jquery.com/ticket/11166

There is workaround to add attrHook to jQuery:

$.attrHooks.viewbox = {
    set: function(elem, value, name) {
        elem.setAttributeNS(null, 'viewBox', value + '');
        return value;
    }
};

But it seems to me that it is not too obvious. It would be nice abilty to customize DOM access methods at stickit binding level.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions