如何在JavaScript中實現<hot-table>？

Question

我想使用handsontable作爲Web組件，這就是爲什麼我使用了熱桌。 我按照this description創建了JS Fiddle sample。

但是，該表不顯示。

HTML

<link rel="import" href="http://handsontable.github.io/hot-table/hot-table.html"> 
<template id="tpl" is="dom-bind"> 
    <hot-table width="655" height="295" datarows="{{ people }}" context-menu max-rows="{{ people.length }}" 
      highlighted-row="{{ highlightedRow }}" class="htLeft"> 
    <hot-column width="30" read-only value="id" header="ID"></hot-column> 
    <hot-column value="name.first" header="First Name"> 
     <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template> 
    </hot-column> 
    <hot-column width="100" value="name.last" header="Last Name"></hot-column> 
    <hot-column width="100" type="date" value="date" header="Birthday"></hot-column> 
    <hot-column value="gender" header="Gender" source="[[ genderSource ]]" type="dropdown"></hot-column> 
    <hot-column type="numeric" value="age" header="Age"></hot-column> 
    <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes" 
       unchecked-template="No"></hot-column> 
    <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes" 
       unchecked-template="No"></hot-column> 
    <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes" 
       unchecked-template="No"></hot-column> 
    <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column> 
    </hot-table> 
</template> 

的JavaScript

var people = [ 
    {id: 1, date: '24/12/1986', name: {first: 'Joe', last: 'Fabiano'}, gender: 'Male', age: 21, 
    languages: {english: 'Yes', spanish: 'Yes', french: 'No'}, salary: 2000}, 
    {id: 2, date: '30/01/1976', name: {first: 'Fred', last: 'Wecler'}, gender: 'Male', age: 25, 
    languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2500}, 
    {id: 3, date: '14/07/1967', name: {first: 'Steve', last: 'Wilson'}, gender: 'Male', age: 32, 
    languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1700}, 
    {id: 4, date: '14/06/1956', name: {first: 'Maria', last: 'Fernandez'}, gender: 'Female', age: 27, 
    languages: {english: 'No', spanish: 'Yes', french: 'Yes'}, salary: 3000}, 
    {id: 5, date: '09/05/1975', name: {first: 'Pierre', last: 'Barbault'}, gender: 'Male', age: 46, 
    languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 1450}, 
    {id: 6, date: '01/01/1986', name: {first: 'Nancy', last: 'Moore'}, gender: 'Female', age: 34, 
    languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2300}, 
    {id: 7, date: '04/03/1994', name: {first: 'Barbara', last: 'MacDonald'}, gender: 'Female', age: 19, 
    languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1900}, 
    {id: 8, date: '01/04/1993', name: {first: 'Wilma', last: 'Williams'}, gender: 'Female', age: 33, 
    languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2400}, 
    {id: 9, date: '01/05/1982', name: {first: 'Sasha', last: 'Silver'}, gender: 'Male', age: 27, 
    languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 2110}, 
    {id: 10, date: '03/10/1992', name: {first: 'Don', last: 'Pérignon'}, gender: 'Male', age: 42, 
    languages: {english: 'No', spanish: 'No', french: 'Yes'}, salary: 2090}, 
    {id: 11, date: '01/10/1991', name: {first: 'Aaron', last: 'Kinley'}, gender: 'Female', age: 33, 
    languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2799} 
]; 

window.addEventListener('dom-change', function() { 
    var tpl = document.getElementById('tpl'); 

    tpl.people = people; 
    tpl.genderSource = ['Male', 'Female']; 

    console.log('HotTableUtils', HotTableUtils); 
}); 

Answer 1

有與你撥弄幾個問題。

1. webcomponents-lite.js是一個JavaScript，因此必須使用<script>標記加載。它實際上只用於Chrome以外的瀏覽器。
2. 您的示例使用了Polymer 2，它沒有<template is="dom-bind">。它應該使用<dom-bind><template>
3. 事件監聽器dom-change似乎是多餘的

固定演示：https://jsfiddle.net/r0q4trwr/2/