Aurelia使用setAttribute方法的自定义属性() [英] Aurelia Custom Attribute with setAttribute method()
问题描述
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对象。
由于这不是直截了当您可能会想,我会解释一下。
增强方法需要以下参数用于此场景:
this $ c
获得对符合我们要求的ViewResources对象的访问权限,将 require
自定义属性放入您的父视图中,然后使用父视图的 ViewResources
。为此,需要
父视图HTML内的视图,然后实现创建的(拥有View,thisView)
回调控制器。当它被触发时, thisView
将有一个资源
属性,它是一个ViewResources对象,它包含要求
-d自定义属性。
由于我在解释时很尴尬,请查看下面提供的示例。
$ b
以下是一个示例:
app.js 来自'aurelia-framework'的导入{TemplatingEngine}; app.html Gist.run:
$ 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);
}
}
< template>
< require from =./ example-custom-attribute>< / require>
< div ref =view>< / div>
< / template>
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/
这篇关于Aurelia使用setAttribute方法的自定义属性()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!