带有 setAttribute 方法的 Aurelia 自定义属性() [英] Aurelia Custom Attribute with setAttribute method()
问题描述
当我在 javascript 中创建和附加元素并设置自定义属性时，Aurelia 似乎不知道(除非我做错了什么).例如，
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 的 enhance 方法，以便它注册自定义属性或任何真正与 Aurelia 相关的内容.并且您还必须传入一个包含自定义属性的 ViewResources 对象.
因为这并不像你想象的那么直接，我会解释一下.
enhance 方法需要以下参数用于此场景:
- 您的 HTML 为纯文本(字符串)
- 绑定上下文(在我们的场景中，它只是
this) - 具有所需自定义属性的 ViewResources 对象
访问满足我们要求的 ViewResources 对象的一种方法是将自定义属性require 到您的父视图中，然后使用父视图的 ViewResources.为此，require 父视图 HTML 中的视图，然后在控制器中实现 created(owningView, thisView) 回调.当它被触发时，thisView 将有一个 resources 属性，这是一个包含 require-d 自定义属性的 ViewResources 对象.
由于我的解释很糟糕，请查看下面提供的示例.
<小时>下面是一个例子:
app.js
import { TemplatingEngine } from 'aurelia-framework';出口类应用{静态注入 = [TemplatingEngine];message = '你好世界！';构造函数(模板引擎，视图资源){this._templatingEngine = 模板引擎；}创建(拥有视图，此视图){this._viewResources = thisView.resources;}绑定(){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
<require from="./example-custom-attribute"></require><div ref="视图"></div><小时>
Gist.run:
https://gist.run/?id=7b80d2498ed17bcb88f17b17b9f>6f<小时>
其他资源
Dwayne Charrington 写了一篇关于这个主题的优秀教程:
https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
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/
这篇关于带有 setAttribute 方法的 Aurelia 自定义属性()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
