повторное использование импортированного шаблона веб-компонента

Я создал веб-компонент (я новичок в этом, а не эксперт по 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 возможно ли это

источник

2016-11-07 Coen Damen

это потому, что все переменные, которые вы определили:.?

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() {...}  
    } 
}

источник

2016-11-07 11:24:45 Supersharp

спасибо, глупый из меня, я должен h ave положил все в созданную функцию Callback .... –

повторное использование импортированного шаблона веб-компонента

ответ

Смежные вопросы