data-binding - 绑定(bind)到动态生成的组件/元素的可绑定(bind)属性

Question

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

<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);
}

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



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

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

并发现，我必须为元素的 View 模型引入一个对象作为它的 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);

但是在附加的元素生命周期钩子(Hook)上，我记录了 View 模型并注意到 this 上不存在 bindingContext 属性.

现在有两个问题:

上述解决方案有什么问题，如何将此类数据发送到增强元素？

有没有办法用 bindable 的已知方法来做到这一点？年代？我的意思是在元素 View 模型上定义一个可绑定(bind)属性，并在增强方法完成后绑定(bind)到它。而不是使用 bindingContext 和 overrideContext？

Answer 1

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

问题是我误解了 bindingContext 和 container 的含义。我在想 bindingContext 将引用子元素的 View 模型，我必须将它的容器指向父上下文(这是属性)。但是我发现我应该将 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);

并且绑定(bind)是指属性的 this 上下文，它具有以下属性:

filter = '';
showMentionPicker = false;
mentionPickerViewModel; 

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