関数からHTMLを注入する

Question

私は「Quick Tour of Polymer」の後に、配列に基づいて要素を繰り返す方法を説明するセクションがありますが、それはテンプレートリピータで行う方法を示しています本当に後ろからその仕事が分かっている。私は自分のリピータをやろうとしましたが、Polymerは自分のコードをエスケープ文字のような文字列として注入します。

コード：

<dom-module id="employee-list"> 

<template> 
    [[employe()]] 
</template> 

<script> 

    class EmployeeList extends Polymer.Element { 

     static get is() { 

     return 'employee-list' 

     } 

     constructor() { 
     super() 
     this.employees = [ 
      {first: 'Bob', last: 'Li'}, 
      {first: 'Ayesha', last: 'Johnson'}, 
      {first: 'Fatma', last: 'Kumari'}, 
      {first: 'Tony', last: 'Morelli'} 
     ] 
     } 

     employe(employees = this.employees) { 

     let template = '<div>Employee List</div>' 
     template += employees.map((currentEmployee, id) => { 
      return `<div>Employee ${id}, FullName : ${currentEmployee.first + ' ' + currentEmployee.last}</div>` 
     }) 

     return template 

     } 


    } 

    customElements.define(EmployeeList.is,EmployeeList) 

</script> 

</dom-module> 

結果：

<div>Employee List</div><div>Employee 0, FullName : Bob Li</div>,<div>Employee 1, FullName : Ayesha Johnson</div>,<div>Employee 2, FullName : Fatma Kumari</div>,<div>Employee 3, FullName : Tony Morelli</div> 

そして私はあなたが使用できる2

Answer 1

@ポリマー中ジェクトアンエスケープ文字/ HTMLのその形かどうかを知りたいですquerySelectorあなたの関数内でそれが起こるようにする

html

<template> 
    <div id="employee-list"></div> 
</template> 

JS

this.querySelector("#employee-list").innerHTML = template 

あなたがIDを取得し、それをあなたが道をやっている場合は、ヨルダンで述べたように、あなたはDOMリピート

<div> Employee list: </div> 
<template is="dom-repeat" items="{{employees}}"> 
    <div>First name: <span>{{item.first}}</span></div> 
    <div>Last name: <span>{{item.last}}</span></div> 
</template> 

を使用する必要があります代替がありますdom-repeatを使用してください。これを行うには、属性index-asを使用できます。

<template is="dom-repeat" items="{{employees}}" index-as="id"> 

あなたがここにdom-repeatについての詳細を調べることができます： `<テンプレートは=「DOMリピート」である>https://www.polymer-project.org/1.0/docs/api/dom-repeat