用setAttribute方法()

Question

当我在javascript中创建和追加一个元素并设置一个自定义属性(除非我做错了什么)时，Aurelia似乎不知道。例如,

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

在添加自定义属性时，是否有一种方法可以使其知道此自定义属性？

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

Answer 1

您必须手动触发Aurelia的enhance方法，以便注册自定义属性或任何与Aurelia相关的内容。您还必须传入一个包含自定义属性的ViewResources对象。

既然这不像你想的那么直接，我会解释一下。

增强方法需要此场景的下列参数：

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

访问满足我们需求的ViewResources对象的一种方法是将自定义属性require到父视图中，然后使用父视图的ViewResources。为此，在父视图的require中使用created(owningView, thisView)视图，然后在控制器中实现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/