当内部 html 本身已经动态生成时，如何绑定到 html 属性？

Question

首先，这是我的 index.html:

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

innerHtml 是在页面呈现后生成的，最终可能是这样的：

<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。 Aurelia 仅绑定到初始 HTML 而不是由我拥有的字符串生成的字符串，它替换了 innerHtml，如下所示：

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

额外说明：仅当我正在处理幻灯片时才会发生超时，我将遍历每张图像以替换 html 中的图像，因此我实际上没有替换 'class'需要替换图像的 'src' 而不刷新所有其他图像 html 因为我有视频需要继续播放。 $i$ 只是我要替换的小部件的索引。

关于如何解决这个问题的任何线索？

Answer 1

你为什么不在 window.load 上加载你的脚本，这样你的脚本将在文档中的所有资源加载后执行。

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading. 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，而不是更改 class 现在您必须更改 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);
  }
}

Answer 2

这就是问题所在，但在另一个 post 中：Aurelia not binding innerHTML bind statements

这或多或少是我解决它的方法：https://github.com/aurelia-contrib/aurelia-dynamic-html

我想如果我更清楚自己在处理什么，我的问题可能会得到更好的解释。

当内部 html 本身已经动态生成时，如何绑定到 html 属性？

How to bind to an html attribute when the innerhtml itself is already generated dynamically?

javascript

html

aurelia