javascript - 通过 x-tag 访问器传递函数

Question

我正在尝试使用 x-tag 访问器，但我没有找到关于它们的好文档。我想通过访问器传递一个函数并编写如下内容：

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

我想保存该功能并在以后使用它。有没有办法做到这一点？

Answer 1

我真的不确定你想要完成什么，但我会试一试。如果您尝试使某些逻辑在所有<my-element>标签上可用，请使用该methods对象，如下所示：

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

如果您希望能够单独分配logic给每个实例<my-element>，那么您可以使用标准（非属性）访问器，并隐式执行此操作。

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

HTML

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

为一个实例设置逻辑<my-element>

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

如果你想使用一个属性来设置logic一个全局函数的值，你可以这样做：

示例全局函数

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

零件

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

用法 (HTML)

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

用法（JS）

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