Question

使用案例

我有一个自定义属性，用于更改其附加元素的内容，例如从非粗体到粗体。

问题

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

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

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

案例1：没有属性。文字已更新。这很好。
案例2：文本未更新。预期：更新文本，但不应该是粗体（缺少值更改调用）。
案例3：文本已更新但未加粗（缺少值更改调用）。这很好。
案例4：文本未更新。已过滤：更新文本并使其变为粗体
案例5：文本更新并变为粗体。这很好。

问题

有人可以解释一下，案例2和4内部正在讨价还价吗？

CODE：

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>

粗体定制attribute.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不再具有更新绑定值所需的DOM元素的引用。

Answer 2

我能够通过结合Ashley，Fabio和正确的调试地点来找出究竟发生了什么。

${content}字符串插值都会得到ChildInterpolationBinding绑定到它们形成的文本节点（位于<pre>内，虽然不能直接在Chrome调试器中看到），或者更精确到textContent属性。这意味着，只要在<pre>中替换bolden()的内部HTML，文本节点就会从DOM中消失（但是，绑定仍然存在并更新文本节点textContent ）。新节点当然没有绑定（解释为什么情况4不起作用）。

现在，案例5（textcontent.bind）的不同之处在于Binding直接附加到指定的<pre>，或者更确切地说是pre.textContent上的<pre>属性。如果textContent内的内容发生变化（例如通过innerHTML或<pre>），则绑定仍在正确的节点（textcontent）上。

修改 Ashley提到的一个重点是在valueChanged()之前调用textcontent绑定。这使得案例5完全起作用。首先，更新valueChanged()（使用不会丢失的绑定），然后，在刚更新的文本内容中读取值更改并应用新的HTML标记。

由于这一点，案例4正在进行一次输入更改。在VM构建之后，绑定是正确的并且更改值工作。插值绑定正在更新文本节点，然后调用created()，带有绑定的文本节点从DOM中消失。

我正在玩一下，并设法改变绑定。 当然，这不应该用于制作。添加export class BoldCustomAttribute { static inject = [Element]; constructor(element) { this.element = element; } created(owningView, myView) { if (this.element.hasChildNodes() && this.element.firstChild.auInterpolationTarget === true) { owningView.bindings.forEach(binding => { if (binding.target === this.element.firstChild) {; binding.target = this.element; binding.targetProperty = 'innerHTML'; } }); } } bind() { this.bolden(this.element); } valueChanged(newValue, oldValue){ this.bolden(this.element); } bolden(anElement) { anElement.innerHTML = '<b>' + anElement.innerText + '</b>'; } }时，每个人都可以“正常”。

resolve: { simpleObj: function(toaster) { toaster.info('Home!'); } }

Aurelia Custom属性，用于更改元素内部HTML

2 个答案: