Вычисление естественной ширины изображения при начальной загрузке страницы с помощью модификаторов ember-render в компонентах Ember Glimmer - PullRequest
Новая
       2

Вычисление естественной ширины изображения при начальной загрузке страницы с помощью модификаторов ember-render в компонентах Ember Glimmer

1 голос
/ 07 апреля 2020

До использования новых компонентов Ember Glimmer я использовал хук жизненного цикла didInsertElement для вычисления естественной ширины элемента изображения. Я передаю целевую ширину, чтобы я мог изменить размер изображения в браузере. 

didInsertElement() {
    this._super(...arguments);
    if (this.targetWidth && this.targetWidth < this.element.naturalWidth) {
        this.targetHeight = Math.round(this.targetWidth / this.element.naturalWidth * this.element.naturalHeight);
        set(this, 'width', this.targetWidth);
        set(this, 'height', this.targetHeight);
    }
    else {
        set(this, 'width', this.naturalWidth);
        set(this, 'height', this.naturalHeight);
    }

С компонентами Glimmer и с использованием @ ember / render-modifiers, sr c передается родителем : 

<img {{did-insert this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>

В компоненте JS file 

@action
calculateDimensions(element) {
    if (this.args.targetWidth && this.args.targetWidth < element.naturalWidth) {
        this.height = Math.round(this.args.targetWidth / element.naturalWidth * element.naturalHeight);
        this.width = this.args.targetWidth;
    }
    else {
        this.width = element.naturalWidth;
        this.height = element.naturalHeight;
    }
    element.setAttribute("width", this.width);
    element.setAttribute("height", this.height);
}

Все это прекрасно работает, если вы перезагрузите указатель / домашнюю страницу. Однако, когда вы впервые прибываете на сайт, изображение не отображается, поскольку значение element.naturalWidth равно нулю. Элемент присутствует, и если он зарегистрирован в консоли, я могу видеть значения для естественной ширины и высоты. Является ли ember-render-modifier {{did-insert}} полной заменой didInsertElement?

Любая помощь высоко ценится.

1 Ответ

2 голосов
/ 07 апреля 2020

Я не уверен, что это «Ember» способ решить эту проблему, но я использовал событие загрузки: 

<img {{on "load" this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>

Это решает проблему, но я все еще не уверен, почему ember- modifer {{did-insert}} не достигает того же самого - я предположил, что элемент был вставлен в DOM, и, следовательно, вы сможете получить его натуральную ширину и высоту?

...