Question

当我在javascript中创建并追加元素并设置自定义属性时，Aurelia似乎不知道（除非我做错了）。例如，

const e = document.createElement('div');
e.setAttribute('custom-attr', 'some value');
body.appendChild(e);

有没有办法让Aurelia在添加后自动识别这个自定义属性？

一点背景：我正在创建一个应用，用户可以在其中选择元素类型（例如输入，选择，复选框等）并拖动它（拖动在自定义属性中完成））。我考虑过创建一个包装器<div custom-attr repeat.for="e of elements"></div>并以某种方式呈现元素数组，但这似乎效率低下，因为每次推送一个新的元素时，转发器都会遍历所有元素，而我并不想创建一个包装器围绕像可能创建的文本输入这样简单的东西。

Answer 1

您必须手动触发Aurelia的enhance方法才能注册自定义属性或Aurelia真正相关的任何内容。而且您还必须传入包含自定义属性的ViewResources对象。

由于这并不像你想象的那样直截了当，我会稍微解释一下。

此方案需要以下参数：

您的HTML为纯文本（字符串）
绑定上下文（在我们的场景中，它只是this）
具有所需自定义属性的ViewResources对象

访问符合我们要求的ViewResources对象的一种方法是将require自定义属性添加到父视图中，然后使用父视图ViewResources。为此，require父视图HTML中的视图，然后在控制器中实现created(owningView, thisView)回调。触发后，thisView将拥有resources属性，该属性是包含require -d自定义属性的ViewResources对象。

由于我很难解释，请查看下面提供的示例。

以下是如何：

的示例

<强> app.js

import { TemplatingEngine } from 'aurelia-framework';

export class App {
  static inject = [TemplatingEngine];

  message = 'Hello World!';

  constructor(templatingEngine, viewResources) {
    this._templatingEngine = templatingEngine;
  }

  created(owningView, thisView) {
    this._viewResources = thisView.resources;
  }

  bind() {
    this.createEnhanceAppend();
  }

  createEnhanceAppend() {
    const span = document.createElement('span');
    span.innerHTML = "<h5 example.bind=\"message\"></h5>";
    this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources });
    this.view.appendChild(span);
  }
}

<强> app.html

<template>
  <require from="./example-custom-attribute"></require>

  <div ref="view"></div>
</template>

<强> Gist.run：

https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9

其他资源

Dwayne Charrington写了一篇关于这个主题的优秀教程：

https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

使用setAttribute方法（）的Aurelia自定义属性

1 个答案: