Javascript Aurelia自定义属性，用于更改HTML内部的元素

用例

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

问题

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

你可以在这个GistRun中看到：

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

• 案例1：没有属性。文本更新。这很好
• 案例2：文本未更新。预期：更新文本，但不应为粗体（缺少值更改调用）
• 案例3：文本已更新但未加粗（缺少值更改调用）。这很好
• 案例4：文本未更新。Exptected：更新文本并将其加粗
• 案例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>

${content}
${content}
${content}

bold-custom-attribute.js

导出类BoldCustomAttribute{
静态注入=[元素]；
构造函数（元素）{
this.element=元素；
}
绑定（）{
//this.bolden（this.element）；
}
附（{
this.bolden（this.element）；
}
值已更改（新值、旧值）{
this.bolden（this.element）；
}
博尔登（一种元素）{
anElement.innerHTML=''+anElement.innerText+''；
}
}

通过修改HTML，您可以创建新的DOM元素，因此Aurelia不再引用更新绑定值所需的DOM元素

通过以您现在的方式修改HTML，您可以创建新的DOM元素，因此Aurelia不再引用更新绑定值所需的DOM元素

通过Ashley、Fabio的帖子和正确的调试地点，我能够准确地了解到底发生了什么

---

${content}

字符串插值都得到一个

ChildInterpolationBinding

绑定到它们形成的文本节点（在

中），通过Ashley、Fabio的帖子和正确的调试位置的组合，我能够准确地找出发生了什么

${content}
字符串插值都会将
ChildInterpolationBinding
绑定到它们形成的文本节点（在
中），为什么要这样做，而不仅仅是将css类绑定到绑定值？@Paul实际上，
bolden（）
要复杂得多，而且不只是添加一个元素。如果它只是强文本，那么是的，你是对的。但这只是一个小小的修改。即使如此，修改
innerHTML
也感觉非常非Aurelia（或任何SPA框架）。您不能创建一个包含所有所需HTML的自定义元素，然后将内容传递给它吗？当然，无论如何，问题是这两种情况之间的区别是什么，即4和5。一个正常，一个不正常。那么内部的区别是什么？您的自定义属性正在破坏innerHTML可见。如果您有complex rules您应该将所有内容封装在自定义元素中为什么要这样做，而不仅仅是将css类绑定到绑定值？@Paul，实际上，
bolden（）
要复杂得多，而且不只是添加一个元素。如果它只是强文本，那么是的，你是对的。但这只是一个小小的修改。即使如此，修改
innerHTML
也感觉非常非Aurelia（或任何SPA框架）。您不能创建一个包含所有所需HTML的自定义元素，然后将内容传递给它吗？当然，无论如何，问题是这两种情况之间的区别是什么，即4和5。一个正常，一个不正常。那么内部的区别是什么？您的自定义属性正在破坏innerHTML可见。如果您有complex rules您应该将所有内容封装在自定义元素中。虽然您的答案可能是正确的，但我并不完全满意：）。例如，案例5为什么有效？HTML也添加在那里。案例4在Aurelia中是如何绑定的？它不是绑定到外部HTML（
）哪一个没有更改？案例5之所以有效，是因为您将属性绑定到了
content
，因此Aurelia调用了属性上的
valueChanged
，但这似乎发生在
textContent
更新之后。基本上，案例5之所以有效，是因为Aurelia在调用
valueChanged
之前更新了
textContent
至于案例4不起作用的原因，我不确定。杰里米·丹约或许可以解释。我会把问题指给他看。尽管如此，我同意@MarcScheib和FabioLuz在问题上发表的评论，因为我觉得无论你试图实现什么，这都是成功实现它的错误策略。Pinging@FabioLuz关于我在案例5的上述有趣观点上的评论。我在
owningView
中找不到与其他绑定类似的绑定（如果我删除
textcontent.bind
，则textarea只有一个绑定）.所以，一定是内部发生了其他事情。虽然你的答案可能是正确的，但我并不完全满意：）。案例5为什么有效？HTML也添加到了那里。案例4在奥雷利亚是如何绑定的？它不是绑定到未更改的外部HTML（
）吗？案例5之所以有效，是因为您将属性绑定到了
内容
，因此Aurelia对属性调用了
值更改
，但它似乎是在
文本内容
更新之后发生的。基本上，案例5之所以有效，是因为Aurelia在调用
valueChanged
之前很幸运地更新了
textContent
。至于案例4为什么不起作用，我不确定。杰里米·丹约也许能解释。我会把问题指给他看。全部
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>';
  }
}