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

问题描述

看起来Aurelia并没有意识到当我在javascript中创建和追加元素并设置自定义属性（除非我做错了什么）。例如，

  const e = document.createElement（'div'）; 
 e.setAttribute（'custom-attr'，'some value'）; 
 body.appendChild（e）; 
  

有没有办法让Aurelia在被追加时意识到这个自定义属性？

一点背景：我正在创建一个应用程序，用户可以选择其元素类型（例如输入，选择，复选框等）和拖动它（拖动在自定义属性中完成）。我想创建一个包装< div custom-attr repeat.for =e of elements>< / div> 并以某种方式呈现元素数组，但是这个似乎效率低下，因为中继器会在每次推新的时候检查所有元素，我不想创建一个简单的文本输入包装器。

解决方案

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

---

由于这不是直截了当您可能会想，我会解释一下。

增强方法需要以下参数用于此场景：

• 您的HTML为纯文本（字符串）


• 绑定上下文（在我们的场景中，它只是 this
• 具有所需自定义属性的ViewResources对象



获得对符合我们要求的ViewResources对象的访问权限，将 require 自定义属性放入您的父视图中，然后使用父视图的 ViewResources 。为此，需要父视图HTML内的视图，然后实现创建的（拥有View，thisView）回调控制器。当它被触发时， thisView 将有一个资源属性，它是一个ViewResources对象，它包含要求 -d自定义属性。

由于我在解释时很尴尬，请查看下面提供的示例。
$ b

---

以下是一个示例：

app.js 来自'aurelia-framework'的导入{TemplatingEngine};


$ b导出类应用程序{
static inject = [TemplatingEngine];

message ='Hello World！';

构造函数（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：

It seems Aurelia is not aware when I create and append an element in javascript and set a custom attribute (unless I am doing something wrong). For example,

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

Is there a way to make Aurelia aware of this custom attribute when it gets appended?

A little background: I am creating an app where the user can select their element type (e.g. input, select, checkbox etc.) and drag it around (the dragging is done in the custom attribute). I thought about creating a wrapper <div custom-attr repeat.for="e of elements"></div> and somehow render the elements array, but this seemed inefficient since the repeater will go through all the elements everytime I push a new one and I didn't not want to create a wrapper around something as simple as a text input that might be created.

解决方案

You would have to manually trigger the Aurelia's enhance method for it to register the custom attributes or anything Aurelia related really. And you also have to pass in a ViewResources object containing the custom attribute.

---

Since this isn't as straight forward as you might think, I'll explain it a bit.

The enhance method requires the following parameters for this scenario:

• Your HTML as plain text (string)
• The binding context (in our scenario, it's just this)
• A ViewResources object that has the required custom attribute

One way to get access to the ViewResources object that meets our requirements, is to require the custom attribute into your parent view and then use the parent view's ViewResources. To do that, require the view inside the parent view's HTML and then implement the created(owningView, thisView) callback in the controller. When it's fired, thisView will have a resources property, which is a ViewResources object that contains the require-d custom attribute.

Since I am HORRIBLE at explaining, please look into the example provided below.

---

Here is an example how to:

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

---

Additional resources

Dwayne Charrington has written an excellent tutorial on this topic:

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

这篇关于Aurelia使用setAttribute方法的自定义属性（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！