绑定到动态生成的可绑定属性 component/element

Question

我正在 aurelia 上开发一个自定义属性，让用户 select 从列表中输入文本区域。例如，用法将是这样的：

<textarea value.bind="description" placeholder="your description here" auto-complete></textarea>

您可能已经注意到，auto-complete 是属性。现在，当我想显示提示时，我想在自定义元素中执行此操作以保持简单。所以属性的附加方法将是这样的：

attached() {
    this.containerElement = document.createElement('div');
    this.containerElement.style.position = 'relative';
    const ce = document.createElement('autocomplete-menu');
    this.containerElement.appendChild(ce);
    const ceView = this.templatingEngine.enhance(ce);
    ceView.attached();
    const currentParrent = this.element.parentElement;
    currentParrent.replaceChild(this.containerElement, this.element);
    this.containerElement.appendChild(this.element);
}

现在它打开并成功显示提示区域。截图：

当我想从属性视图模型与生成的元素进行通信时，问题就开始了。例如，我想将数据发送到它的视图模型或将某些对象绑定到它的可绑定属性。对于这个问题，我找到了这些解决方案：

https://discourse.aurelia.io/t/dynamically-add-custom-attribute-to-element/1400/6 https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

并阅读本文的最后一部分：

https://aurelia.io/docs/binding/how-it-works#abstract-syntax-tree

我发现，我必须为元素的视图模型引入一个对象作为其 bindingContext 或 overrideContext。因此，如果我是对的，我已经测试了以下解决方案：

this.containerElement.appendChild(ce);
let vm = { test: 1 }
const ceView = this.templatingEngine.enhance({ element: ce, bindingContext: vm });
ceView.addBinding(vm);
ceView.attached();

和

this.containerElement.appendChild(ce);
let vm = { test: 1 }
const ceView = this.templatingEngine.enhance(ce);
ceView.bind(vm);
ceView.attached();
console.log(ceView);

但是在元素的附加生命周期挂钩上，我记录了视图模型并注意到 this.

上不存在 bindingContext 属性

现在有两个问题：

上述解决方案有什么问题，如何将此类数据发送到增强元素？
有没有办法用 bindables 的已知方法来做到这一点？我的意思是在元素视图模型上定义一个可绑定的属性并在增强方法完成后绑定到它。而不是使用 bindingContext 和 overrideContext?

Answer 1

幸好问题已经解决。解决方案并没有那么复杂，但是 1. 它对我来说非常有用（我将在接下来描述） 2. 缺少 aurelia 文档使得这个简单的问题难以解决。

问题是我误解了 bindingContext 和 container 的含义。我在想 bindingContext 将引用子元素的视图模型，我必须将其容器指向父上下文（即属性）。但是我发现我应该将 bindingContext 指向属性的上下文。我仍然对这两个含义了解不够，但解决方案就像以下示例一样简单和漂亮：

this.containerElement = document.createElement('div');
this.containerElement.style.position = 'relative';
this.containerElement.style.display = 'flex';
this.containerElement.style.flexDirection = 'row-reverse';
this.ce = document.createElement('autocomplete-menu');
this.ce.setAttribute('filter.bind', 'filter');
this.ce.setAttribute('show.bind', 'showMentionPicker');
this.ce.setAttribute('parent-height', '${element.clientHeight}px');
this.ce.setAttribute('view-model.ref', 'mentionPickerViewModel');
this.ce.setAttribute('on-select.call', 'complete(mentionPickerViewModel.getRemainingOfHint())');
const ceView = this.templatingEngine.enhance({ element: this.ce, container: this.container });
ceView.bind(this);
ceView.attached();
this.containerElement.appendChild(this.ce);
const currentParrent = this.element.parentElement;
currentParrent.replaceChild(this.containerElement, this.element);
this.containerElement.appendChild(this.element);

并且绑定指的是属性的 this 上下文，它具有以下属性：

filter = '';
showMentionPicker = false;
mentionPickerViewModel;

如果样本不足以解决您的问题，请向我询问更多信息。

绑定到动态生成的可绑定属性 component/element

binding to bindable attributes of dynamically generated component/element

data-binding

aurelia

template-engine