Как привязать атрибут html, когда внутренний html сам уже генерируется динамически? - PullRequest
Новая
       45

Как привязать атрибут html, когда внутренний html сам уже генерируется динамически?

3 голосов
/ 21 февраля 2020

Для начала, это мой индекс. html: 

<template>
    <div class="panel" innerHtml="${renderedPanel}"></div>
</template>

Внутренний Html генерируется после рендеринга страницы и может закончиться примерно так: 

<div class="panel au-target" au-target-id="294">
   <div>
      <button class.bind="classList">this is a button</button>
   </div>
   <div>
      <img src="image.png">
   </div>
</div>

Теперь предположим, что у меня есть код в моем скрипте: 

public classList = 'btn btn-success';

setTimeout(x => {
   this.classList= 'btn btn-warning';
},5000);

Я ожидаю, что кнопка изменится через 5 секунд, но это не так. И на самом деле у него даже не будет никакого стиля, потому что он не может связываться с classList с самого начала. Аурелия привязывается только к исходному HTML, а не к сгенерированной моей строкой, которая заменяет внутреннюю Html следующим образом: 

this.renderedPainel = this.renderedPainel.replace('$' + i + '$', '<button class.bind="test">Ok</button>');

Дополнительные пояснения: Тайм-аут произойдет, только если я имея дело со слайд-шоу, и я буду go через каждое изображение заменять изображение в html, поэтому вместо замены 'class' мне фактически нужно заменить 'sr c' изображения, не обновляя все остальные html потому что у меня есть видео, которые необходимо продолжить воспроизведение. $ I $ - это просто индекс заменяемого виджета.

Любые подсказки о том, как go узнать об этом?

Ответы [ 2 ]

2 голосов
/ 21 февраля 2020

Почему бы вам не загрузить свой сценарий на window.load, чтобы он был выполнен после загрузки всех ресурсов в документе.

Событие загрузки запускается в конце процесс загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, сценарии, ссылки и подкадры завершили загрузку. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

window.onload = function() {

  public classList = 'btn btn-success';

  setTimeout(x => {
    this.classList= 'btn btn-warning';
  },5000);

}

ОБНОВЛЕНИЕ:

Единственное отличие состоит в том, что вы должны изменить src изображение при условии слайд-шоу, и вместо изменения класса теперь вам придется изменить src, и он будет загружать новое изображение при выполнении. 

window.onload = function() {

  public classList = 'btn btn-success';

  //Assuming you have some logic to determine if you're in a slide show
  if(slideShow){
    setTimeout(x => {
      this.src = newSrc;
    },5000);
  }
}
0 голосов
/ 24 февраля 2020

Это была проблема, но в другом посте: Аурелия не связывает внутреннюю HTML операторы связывания

И это более или менее так, как я решил: https://github.com/aurelia-contrib/aurelia-dynamic-html

Полагаю, мой вопрос можно было бы объяснить лучше, если бы я лучше знал, с чем имею дело.

...