时间戳

首页 > 解决方案 > 绑定到动态生成的组件/元素的可绑定属性

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

问题描述

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

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

正如您可能注意到的， theauto-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-template -引擎增强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);

但是在元素的附加生命周期挂钩上，我已经记录了视图模型并注意到 bindingContext 属性不存在于this.

现在有两个问题：

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

标签： data-bindingaureliatemplate-engine

解决方案

幸运的是问题已经解决了。解决方案并没有那么复杂，但是 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;

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

推荐阅读