javascript-具有setAttribute method()的Aurelia自定义属性

当我在javascript中创建并添加元素并设置自定义属性时,Aurelia似乎不知道(除非我做错了).例如,

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

有没有办法让Aurelia在追加自定义属性后知道它？

一些背景知识：我正在创建一个应用程序,用户可以在其中选择其元素类型(例如输入,选择,复选框等)并将其拖动(在custom属性中完成拖动).我考虑过要创建一个包装器< div custom-attr repeat.for =“ e of elements”>< / div>并以某种方式渲染elements数组,但这似乎效率很低,因为每次我推送一个新元素时,转发器都会遍历所有元素,并且我不想围绕可能创建的文本输入之类的简单内容创建包装器.

解决方法:

您必须手动触发Aurelia的增强方法,才能注册自定义属性或与Aurelia真正相关的任何内容.而且,您还必须传递一个包含自定义属性的ViewResources对象.

由于这并不像您想的那样简单,因此我将对其进行解释.

对于这种情况,增强方法需要以下参数：

> HTML为纯文本(字符串)
>绑定上下文(在我们的场景中,就是这样)
>具有必需的自定义属性的ViewResources对象

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

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

这是一个示例如何：

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/

标签：html,javascript,aurelia,custom-attributes
来源： https://codeday.me/bug/20191012/1898934.html