Question

我是Web组件的新手，正在尝试构建将Kendo UI组件与远程数据源结合在一起的可重用组件。 Kendo组件依赖于使用$（document）.ready（function（）对其进行初始化。当我将该代码放入组件中时，它永远不会触发。

如果我只是将html标记放在组件中，然后将脚本初始化到主代码中，它将正常工作。如果我将脚本放入组件中：我认为它永远不会触发。我已经在console.log中输入了代码，以查看是否看到任何内容，但是zilch。我在控制台上没有看到任何错误，也看不到任何可以帮助我解决此问题的有用信息。组件代码如下

customElements.define('location-multi-list2', class AppDrawer extends 
HTMLElement {
connectedCallback() {
this.innerHTML = '<div class="demo-section k-content">
        <h4>Dynamic Stores2</h4>
        <select id="hastores2"></select>
    </div>
    <script>
        $(document).ready(function() {
            $("#hastores2").kendoMultiSelect({
                dataTextField: "name",
                dataValueField: "id",
                dataSource: {
                    transport: {
                        read: {
                            dataType: "json",
                            url: "https://myDomain/path/storeList",
                        }
                    },
                    schema : {
                    data: "stores.location"
                    }
                }
            });
        });
    </script>';
}
});

Answer 1

使用<script>添加的任何.innerHTML都不会运行。这是为了防止安全风险。有关更多信息，您可以阅读此页上的安全注意事项部分：https://devdocs.io/dom/element/innerhtml

相反，您必须创建一个<script>元素并填写脚本：

class AppDrawer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="demo-section k-content">
      <h4>Dynamic Stores2</h4>
      <select id="hastores2"></select>
    </div>`;
    
    let script = document.createElement('script');
    script.textContent = `alert('here');
      $(document).ready(function() {
        $("#hastores2").kendoMultiSelect({
          dataTextField: "name",
          dataValueField: "id",
          dataSource: {
            transport: {
              read: {
                dataType: "json",
                url: "https://myDomain/path/storeList",
              }
            },
            schema : {
              data: "stores.location"
            }
          }
        });
      });
`;    
    this.appendChild(script);
  }
}

customElements.define('location-multi-list2', AppDrawer);

<location-multi-list2></location-multi-list2>

Answer 2

如果您的脚本在包含jQuery库之前运行，则可能会发生。尝试在内部使用$(document).ready()之类的window.onload = function(){$(document).ready(){}}函数，而不仅仅是调用它。

Web组件未在组件内使用$（document）.ready运行

2 个答案: