Attribut Aurelia personnalisé avec la méthode setAttribute()

Question

Il semble qu'Aurelia ne sache pas quand je crée et ajoute un élément en javascript et que je mets un attribut personnalisé (sauf si je fais quelque chose de mal). Par exemple,

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

Y at-il un moyen de rendre Aurelia conscience de cet attribut personnalisé quand il est ajouté? Je crée une application dans laquelle l'utilisateur peut sélectionner son type d'élément (par exemple, saisir, sélectionner, cocher, etc.) et le faire glisser (le glissement est effectué dans l'attribut personnalisé). Je pensais à créer un wrapper <div custom-attr repeat.for="e of elements"></div> et en quelque sorte rendre le tableau d'éléments, mais cela semblait inefficace puisque le répéteur passera par tous les éléments chaque fois que j'en enfonce un nouveau et je ne voulais pas créer un wrapper autour de quelque chose aussi simple qu'un entrée de texte qui pourrait être créée.

Answer 1

Vous devez déclencher manuellement la méthode enhance d'Aurelia pour enregistrer les attributs personnalisés ou tout ce qui concerne Aurelia. Et vous devez également transmettre un objet ViewResources contenant l'attribut personnalisé.

---

Puisque ce n'est pas aussi simple que vous pourriez penser, je vais vous expliquer un peu.

Enhance méthode nécessite les paramètres suivants pour ce scénario:

• Votre HTML sous forme de texte (string)
• Le contexte de liaison (dans notre scénario, il est juste this)
• Un objet ViewResources qui a l'attribut personnalisé requis

Une façon d'accéder à l'objet ViewResources qui répond à nos exigences est require l'attribut personnalisé dans votre vue parent, puis utilisez ViewResources de la vue parent. Pour ce faire, affichez require dans le code HTML de la vue parente, puis implémentez le rappel created(owningView, thisView) dans le contrôleur. Lorsqu'il est déclenché, thisView aura une propriété resources, qui est un objet ViewResources contenant l'attribut personnalisé require -d.

Comme je suis HORRIBLE à expliquer, veuillez regarder dans l'exemple ci-dessous.

---

Voici un exemple comment:

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.exécutez:

https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9

---

Ressources supplémentaires

Dwayne Charrington a écrit un excellent tutoriel sur ce sujet:

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