インポートされたWebコンポーネントテンプレートを再利用

私はWebコンポーネントを作成しました（これは初めてであり、Javascriptのエキスパートではありません）。しかし、私はこのテンプレートをページ上で複数回使いたいです。コンポーネントのプライベートスコープが再利用されていることがわかりました。これは私が望むものではありません。私はコンポーネントの繰り返しをしたい。インポートされたWebコンポーネントテンプレートを再利用

index.htmlを

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

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

これは、テンプレートの初期化とスクリプト

私-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によって上書きされたことを意味します。（

2番目のhtmlを作成してmy-template2.htmlとして登録すると、明らかにすべて動作しますがこれを望んでいない

私はそれが自分の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はcreatedCallback関数にすべてを入れました.... –

インポートされたWebコンポーネントテンプレートを再利用

答えて

関連する問題