Pass function through x-tag accessors

Question

I am trying to use x-tag accessors but I'm not finding a good documentation about them.I would like to pass a function through an accessor and write something like this:

<my-element logic="myFunction()"></my-element>

And I want to save that function and use it later. Is there any way to do that?

Answer 1

I'm really not sure what you're trying to accomplish, but I'll give it a shot. If you are trying to make some logic available on all <my-element> tags, use the methods object, like this:

xtag.register('my-element', {
    methods: {
        logic: function (a) {
            return a * 2;
        }
    }
});

If you want to be able to assign logic to each instance of <my-element> individually, then you could use a standard (non-attribute) accessor, and do so implicitly.

xtag.register('my-element', {
    accessors: {
        logic: {}
    }
});

HTML

<my-element id="test"></my-element>

Set logic for one instance of <my-element>

var el = document.querySelector('my-element#test');
el.logic = function (a) {
    return a * 2;
};

If you want to use an attribute to set the value of logic to a global function, you could do this:

Example global function

function myFunction(a) {
    return a * 2;
}

Component

xtag.register('my-element', {
    accessors: {
        logic: {
            attribute: {},
            get: function () {
                return this._logic;
            },
            set: function (v) {
                this._logic = window[v] || null;
            }
        }
    }
});

Usage (HTML)

<my-element logic="myFunction"></my-element>

Usage (JS)

var el = document.querySelector('my-element');
el.logic(2); // 4