Блог

Главная - Вопросы по программированию - элемент внутри не клонируется / не проецируется должным образом только в IE11

элемент внутри не клонируется / не проецируется должным образом только в IE11

#javascript #polymer #polymer-1.0

#javascript #полимер #полимер-1.0

Вопрос:

Я думаю, что элемент не проецируется должным образом в IE11. Посмотрите на следующий пример:

 <body unresolved>

  <p>If this demo works correctly, you should be able to see the message <code>"Hello there. Hola!"</code></p>

  <p>
    This works as expected in all browsers except Internet Explorer 11 (maybe 10, although I didn't test). The issue is that when I assign helloElement.value, helloElement is not the same element that is being appended to the dome after is projected inside
    the amp;<demo-snippetamp;>.
  </p>

  <demo-snippet>
    <template is="dom-bind">
      <hello-element></hello-element>

      <script>
        var helloElement = document.querySelector('hello-element');
        helloElement.value = 'Hola!';

        // Wait enough time to make sure demo-snipper is rendered properly
        setTimeout(function() {
          console.log(helloElement === document.querySelector('hello-element')) // this is true in all browsers. In IE11 is false.
        }, 3000)
      </script>
    </template>

  </demo-snippet>
</body>

Происходит то, что значение, присвоенное в helloElement.value , копируется в проецируемый элемент внутри элемента demo-snippet во всех браузерах, кроме IE11. Это означает, что если вы добавите готовый обработчик и выполните

 ready: function () {
   console.log(this.value) // --> 'Hola!' except IE11, that is ''
}

Это ошибка в Polymer или demo-snippet при проецировании моего кода внутрь? или когда он присоединен к dom? Я действительно понятия не имею: (

Вы можете поиграть с моим примером в этом плунжере: https://plnkr.co/edit/5UBCDjqC0A8k6HcaHnIJ?p=preview

Комментарии:

1. почему вы не установили значение из разметки?

2. Это пример, показывающий ошибку. В моем реальном коде у меня большой массив данных, поэтому передача разметки не является вариантом. Но спасибо.

3. В этом случае вы можете извлечь i из файла json с помощью ajax-запроса

4. @jhuesos большой массив данных может быть передан в модель, которая затем использует dom-repeat элементы (возможно вложенные), чтобы поместить их в разметку. У меня есть элемент календаря, который отображает полный календарь месяца, в котором подробно перечислены встречи на каждый день. и небольшие графики того, насколько полны списки в каждый день. Все данные извлекаются в одном ajax-запросе на сервер, и все это затем добавляется к объекту в моих свойствах элементов. Весь календарь отображается с использованием разметки из этого одного объекта.

5. Не удалось уместить мой полный ответ на один комментарий. документ. querySelector() работает с теневым dom, и я думаю, что работает по-разному в зависимости от того, что заполнено или нет. Если вы настаиваете на работе в dom (и, как я уже говорил в предыдущем комментарии, в этом не должно быть необходимости), посмотрите руководство для разработчиков Polymer по процедурам манипулирования Polymer.dom() .

Ответ №1:

По-видимому, IE более строг с этим. Вам нужно вызвать element.setAttribute вместо того, чтобы просто добавлять его в объект.

Это гарантирует, что polymer получит значение по умолчанию в качестве атрибута.