Я создал веб-компонент (я новичок в этом, а не эксперт по Javascript) и ввел его в Shadow DOM. Но я хочу использовать этот шаблон несколько раз на странице. Я обнаружил, что частная область компонента повторно используется, чего я не хочу. Я хочу повторить компонент.повторное использование импортированного шаблона веб-компонента
index.html
<body>
<my-template id="data1" data="data.json" ></my-template>
<br/>
<br/>
<my-template id="data2" data="data.json"></my-template>
Это шаблон Init и Script
мой-template.html
(function (doc) {
var data;
var id;
var total = 0;
var template;
var root;
var totalSelected;
var container;
// This element will be registered to index.html
// Because `document` here means the one in index.html
var XComponent = document.registerElement('my-template', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
root = this.createShadowRoot();
// use doc instead of document or document.currentScript.ownerDocument
template = doc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
data = this.getAttribute('data');
id = this.getAttribute('id');
init();
}
}
})
});
function init(){
console.log('init ',id);
// create input field
totalSelected = document.createElement('input');
totalSelected.type = 'text';
totalSelected.id = 'total-selected'+id;
totalSelected.addEventListener("click", showList);
root.appendChild(totalSelected);
// values container
container = document.createElement('div');
container.id = 'container'+id;
container.className = 'container';
for(var i=0 ; i < 3; i++){
var row = document.createElement('div');
row.id = 'row-'+i+'-'+id;
container.appendChild(row);
}
root.appendChild(container);
}
return {
append : append,
showList : showList,
hideList : hideList
}
function showList() {
console.log('showList', container);
container.style.display = 'block';
}
function hideList() {
container.style.display = 'none';
}
})(document.currentScript.ownerDocument); // pass document of x-component.html
Теперь, когда я нажимаю в поле ввода, всегда открывается «data2». Это означает, что при нажатии на компонент data1 переменные были перезаписаны с помощью data2 init :(
Когда я создаю второй html и регистрирую его как my-template2.html, то, очевидно, все работает, но (очевидно) I не хотят этого
Как я могу повторить этот шаблон, используя его собственный INIT возможно ли это
спасибо, глупый из меня, я должен h ave положил все в созданную функцию Callback .... –