如何在 JavaScript 中实现 <hot-table>？

Question

我想将 handsontable 用作 Web 组件，这就是我使用 hot-table 的原因。我创建了一个 JS Fiddle sample as per this description.

然而，table没有显示。

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

您的 fiddle 没有什么问题。

webcomponents-lite.js 是一个 JavaScript，因此必须使用 <script> 标签加载它。实际上只有 Chrome
您的示例使用 Polymer 2，它没有 <template is="dom-bind">。它应该使用 <dom-bind><template>
事件侦听器dom-change似乎是多余的

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

如何在 JavaScript 中实现 <hot-table>？

How to implement a <hot-table> in JavaScript?

javascript

web-component

handsontable

polymer-2.x