Веб-компонент не работает с использованием $ (document) .ready из компонента - PullRequest
Новая
       49

Веб-компонент не работает с использованием $ (document) .ready из компонента

0 голосов
/ 27 июня 2019

Я новичок в веб-компонентах и ​​пытаюсь создать повторно используемый компонент, комбинирующий компонент пользовательского интерфейса Kendo с удаленным источником данных.Компонент Kendo полагается на использование $ (document) .ready (function () для его инициализации. Когда я помещаю этот код в компонент, он никогда не срабатывает.

Если я просто добавлю html-метку в компонентеи поместите скрипт для инициализации его в основном коде, он работает нормально. Если я помещу скрипт в компонент: я не думаю, что он когда-либо запускается. Я поместил console.log в код, чтобы увидеть, вижу ли ячто угодно, но пшик. Я не получаю ошибок на консоли и не вижу ничего полезного, что может помочь мне решить эту проблему. Код компонента ниже 

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

Ответы [ 2 ]

3 голосов
/ 27 июня 2019

Любой <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>
0 голосов
/ 27 июня 2019

Это может произойти, если ваш скрипт запущен до включения библиотеки jQuery.Попробуйте использовать свою $(document).ready() функцию внутри, например window.onload = function(){$(document).ready(){}}, вместо того, чтобы просто вызывать ее.

...