javascript - Aurelia 自定义属性，可更改元素内部 HTML

Question

用例

我有一个自定义属性，它可以更改它所附加的元素的内容，例如从非粗体到粗体。

问题

使用正常绑定(bind)，内部 HTML 不会改变。我认为，一旦使用“普通”Javascript 更新 HTML，Aurelia 就会失去绑定(bind)。

您可以在此 GistRun 中看到它:https://gist.run/?id=6f16ac1c8affb0277d7ad5c53d433482

更改该区域中的文本。有五种情况:

• 情况 1:无属性。文字已更新。这很好。
• 情况2:文本未更新。预期:更新文本，但不应为粗体(缺少值更改调用)。
• 情况 3:文本已更新但不是粗体(缺少值更改调用)。这很好。
• 情况 4:文本未更新。预期:更新文本并使其粗体
• 情况 5:文本已更新并变为粗体。这很好。

问题

有人可以解释一下，案例 2 和案例 4 内部发生了什么吗？

<小时/>

代码:

app.html

<template>
  <require from="./bold-custom-attribute"></require>

  <textarea value.bind="content"></textarea>
  <pre>${content}</pre>
  <pre bold>${content}</pre>
  <pre bold textcontent.bind="content"></pre>
  <pre bold.bind="content">${content}</pre>
  <pre bold.bind="content" textcontent.bind="content"></pre>
</template>

粗体自定义属性.js

export class BoldCustomAttribute {
  static inject = [Element];

  constructor(element) {
    this.element = element;
  }

  bind() {
    //this.bolden(this.element);
  }

  attached() {
    this.bolden(this.element);
  }

  valueChanged(newValue, oldValue){
    this.bolden(this.element);
  }

  bolden(anElement) {
    anElement.innerHTML = '<b>' + anElement.innerText + '</b>';
  }
}

Answer 1

通过按照您现在的方式修改 HTML，您会创建新的 DOM 元素，因此 Aurelia 不再拥有更新绑定(bind)值所需的 DOM 元素的引用。