为什么自定义元素不支持将属性作为对象? [英] Why custom elements not support attributes as an object?

问题描述

我正在尝试将自定义元素中的数据属性作为对象传递，但是在接收到AttachCallback方法内部时以字符串形式获取值"[object object]".

任何人都可以帮助我弄清楚如何在custom-element(网络组件)中将属性作为对象获得.

So can anyone help me to figure out what is the work around to get the attributes as an object inside custom-element(web component).

代码示例

<script>
class myElements extends HTMLElement {
    createdCallback() {
        this.innerHTML = `<h1>Hello</h1>`;
    }
    attachedCallback() {
        console.log(this.getAttribute('data'));
    }
}

 document.registerElement('my-element', myElements);
</script>

自定义元素标签

<script>
    var object = { key1: 111, key2: 222, key3: function(){return "hi"}, key4:[1,2,3]};

   function changeHandler() {
    page('/default', function() {
        // some logic to decide which route to redirect to
        if (admin) {
            page.redirect('/admin');
        } else {
            page.redirect('/guest');
        }
    });
}

</script>

<my-element data="object" onchange="changeHandler"></my-element>

注意:假设< my-element> 是一个下拉菜单，它使用户可以选择一些值.

Note: suppose that <my-element> is a dropdown which gives user option to choose some value.

解决方案:自定义元素规范中仍然没有原生解决方案( v0和 v1 ).

Solution: Still no native solution in custom-element specs(v0 and v1).

由于自定义元素"不支持数据绑定，因此我们需要为此加糖层(例如，Polymer或SkateJS)，如@tony在评论中所述.

Since Custom Elements doesn't support data binding so we need a sugaring layer for that (e.g., Polymer or SkateJS) as mention by @tony in the comment.

推荐答案

尝试通过将对象转换为JSON字符串

Try by converting object to JSON string,

var object = { key1: 111, key2: 222};
JSON.stringify(object);

然后，当您要获取值时，将其解析回对象

Then when you want to get the value, parse it back to object

JSON.parse(this.getAttribute('data'));

这篇关于为什么自定义元素不支持将属性作为对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！