Ember теговый компонент innerhtml

Question

У меня есть компонент без тегов в Ember, и я хочу, чтобы innerHtml (this.element) был подключен к жизненному циклу (например, didRender). Когда я использую this.element, значение всегда равно null. Когда я добавляю тэг к компоненту (tagName: 'div'), у меня есть innerHtml компонента с this.element, но могу ли я получить innerHtml без установки tagName?

Answer 1

this.element не дает вам innerHTML, он дает вам настоящий HTML Element. Компонент без тегов по определению не имеет собственных Element. Так что this.element обязательно равно нулю.

Самая большая причина, по которой мы не добавили эквивалентное свойство для извлечения Range (что необходимо для представления области DOM без компонента), заключается в том, что в отличие от this.element, Range может изменить в течение срока службы компонента. Сделать его полностью наблюдаемым было бы дорого, а если оставить его ненаблюдаемым, то будет действительно легко создавать ошибки.

Большинство распространенных вариантов использования охватываются тем, что предлагал Гаурав: явная маркировка элементов, которые вы действительно хотите найти, и доступ к ним через querySelector или querySelectorAll.

Если вы делаете что-то действительно причудливое и понимаете, что это только снимок, который может устареть, то аварийный люк - Ember.ViewUtils.getViewBounds. Он не помечен как общедоступный, но зависит от официальных проектов, таких как Ember Inspector, поэтому мы не будем нарушать его без предупреждения. Как и любой широко используемый непубличный API, мы выдадим предупреждение об устаревании и дождемся полного цикла LTS.

В случае Ember.ViewUtils.getViewBounds можно привести веские доводы для того, чтобы просто пометить его как публичный, и если кто-то напишет RFC на этот счет, я думаю, мы сможем достичь консенсуса по этому вопросу.

Answer 2

Да, это сломано. Подробнее см. https://github.com/emberjs/ember.js/issues/13627.

Обходной путь был опубликован здесь: https://github.com/emberjs/rfcs/issues/168 Однако, он использует частный API и может сломаться в будущих версиях без предупреждения.

Я рекомендую либо использовать элемент через tagName, чтобы this.element существовал, либо поместить класс в родительский элемент компонента, чтобы вы могли использовать document.querySelector('.class-name').innerHTML - но для этого необходимо, чтобы родительский элемент был известен.