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

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

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

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

---

一点背景：我正在创建一个应用程序，用户可以在其中选择他们的元素类型（例如输入、选择、复选框等）并将其拖动（拖动在自定义属性中完成）。我考虑创建一个包装器

，并以某种方式呈现元素数组，但这似乎效率低下，因为每次我推一个新的元素时，中继器都会遍历所有元素，我不想围绕可能创建的文本输入这样简单的内容创建一个包装器。

您必须手动触发Aurelia的

enhance

方法，以便它注册自定义属性或属性任何与奥雷莉亚有关的事情。您还必须传入包含自定义属性的ViewResources对象

---

因为这并不像你想的那么直截了当，我会解释一下

Enhanced方法需要此场景的以下参数：

• 您的HTML为纯文本（字符串）
• 绑定上下文（在我们的场景中，它只是

  这个

  ）
• 具有所需自定义属性的ViewResources对象

访问满足我们要求的ViewResources对象的一种方法是

将自定义属性要求到父视图中，然后使用父视图的
ViewResources
。要做到这一点，
需要父视图HTML中的视图，然后在控制器中实现创建的
（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);
  }
}

从'aurelia framework'导入{TemplatingEngine}；
导出类应用程序{
静态注入=[TemplatingEngine]；
message='helloworld！'；
构造函数（模板引擎、视图资源）{
这个._templatingene=templatingene；
}
已创建（owningView、thisView）{
this._viewResources=thisView.resources；
}
绑定（）{
this.createEnhanceAppend（）；
}
createEnhanceAppend（）{
const span=document.createElement（'span'）；
span.innerHTML=“”；
this.\u templatingEngine.enhance（{element:span，bindingContext:this，resources:this.\u viewResources}）；
this.view.appendChild（span）；
}
}

app.html

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

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




要点。运行：



其他资源

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

德韦恩·查林顿（Dwayne Charrington）就这一主题编写了一本优秀的教程：

感谢您提供的资源，我不知道这一点。但是，我无法使它与自定义属性一起工作。我给出了要点，向您展示了属性在元素上时有效，然后动态添加它时无效，因此我发现如果属性位于
globalresources
下而不在
require
标记中，则该示例将有效。不确定（目前）如何让它与
require
tag一起工作可能需要将其添加到元素的源代码中？我知道您可以为增强函数提供一个
viewResources:viewResources
属性，但我真的不知道如何向它注册资源。这里也是。我试图使用
viewsources
类来让它工作，但还没有。我更新了答案。请看看这是否也适用于您。新的gist.run链接是一个工作示例，答案中的代码也是一个工作示例。：）