0

我是 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>';
}
});
4

2 回答 2

3

<script>通过 using 添加的任何.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>

于 2019-06-27T15:01:11.980 回答
0

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

于 2019-06-27T13:18:30.187 回答