Question

我已经构建了一个Web组件（我是新手，而不是Javascript专家）并将其注入Shadow DOM。但是，我想在页面上多次使用此模板。我发现组件的私有范围被重用，这不是我想要的。我想重复一下这个组件。

的index.html

for result in map(lambda zone: actual_triangle(B, zone, midpoint, lengths), zones):
    # do something with your result

这是模板Init和Script

我-template.html

<body>
<my-template id="data1" data="data.json" ></my-template>
<br/>
<br/>

<my-template id="data2" data="data.json"></my-template>

现在，当我单击输入字段时，始终打开“data2”。这意味着当单击data1组件时，变量被data2 init覆盖:(

当我创建第二个html并将其注册为my-template2.html时，它显然都有效，但（显然）我不想要这个。

如何使用自己的init重复此模板？它甚至可能吗？

Answer 1

这是因为您定义的所有变量：

var data;
var id;
var total = 0;
var template;
var root;
var totalSelected;
var container;

...是全球性的，然后与所有元素共享。

为避免这种情况，有几种解决方案。

1）将它们设置为自定义元素对象本身的属性，并将方法附加到原型：

prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function() {
            this.data = this.getAttributes( 'data' )
            //this.id is automatically set
            ...
            this.init()
        }
    },
    init: {
        value: function() {
            this.container = ...
        }
    }

2）定义一个将它们集中在一起的对象：

this.vm = {
    data: this.getAttribute( 'data' )
    id: this.getAttribute( 'id' )
}

3）将它们放在一个闭包中，例如createdCallback：

createdCallback: {
    value: function() {
        var data = this.getAttribute( 'data' )
        var id = this.id  
        init()
        function init() {...}
        function showList() {...}      
    }
}

重用导入的Web组件模板

1 个答案: