Aurelia 自定义属性与 setAttribute 方法（）

Question

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

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

有没有办法让 Aurelia 在附加此自定义属性时知道它？

一些背景知识： 我正在创建一个应用程序，用户可以在其中 select 他们的元素类型（例如输入、select、复选框等）并拖动它（拖动是在自定义属性中完成的）。我考虑过创建一个包装器 <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/

Aurelia 自定义属性与 setAttribute 方法（）

Aurelia Custom Attribute with setAttribute method()

html

javascript

custom-attributes

aurelia