Genera una stringa HTML non elaborata da un file componente e un modello di vista

Question

Abbiamo un modello come questo.

the-template.html

<template><div>${Foo}</div></template> 

Vogliamo farlo con esso.

alcuni-file.ts

let htmlString = makeItHappen('the-template.html', { Foo = 'bar' }); 
console.info(htmlString); // <div>bar</div> 

Qual è l'equivalente della nostra funzione makeItHappen?

Answer 1

Ok quindi ecco il succo: https://gist.run/?id=d57489d279b69090fb20938bce614d3a

Ecco il codice nel caso in cui viene a mancare (con commenti):

import {bindable} from 'aurelia-framework'; 
import {ViewLocator,ViewSlot,ViewEngine,ViewCompileInstruction} from 'aurelia-templating'; 
import {inject, Container} from 'aurelia-dependency-injection'; 

@inject(Element,ViewLocator,ViewEngine,Container) 
export class LoadViewCustomAttribute { 
    @bindable view; 
    @bindable viewModel; 

    constructor(element,vl,ve,container) { 
    this.element = element; 
    this.vl = vl; 
    this.ve = ve; 
    this.container = container; 
    } 

    attached() { 
    // Get a view strategy for this view - this will let Aurelia know how you want to locate and load the view 
    var view = this.vl.getViewStrategy(this.view); 

    // Create a view factory from the view strategy (this loads the view and compiles it) 
    view.loadViewFactory(this.ve, new ViewCompileInstruction()).then(vf => { 
     // Create a view from the factory, passing the container (you can create a child container at this point if you want - this is what Aurelia usually does for child views) 
     var result = vf.create(this.container); 
     // Bind the view to the VM - I've passed the current VM as the override context which allows Aurelia to do away with the $parent trick 
     result.bind(this.viewModel, this); 

     console.log(result); // for inspection 

     // Optional - create a viewslot and add the result to the DOM - 
     // at this point you have a view, you can just look at the DOM 
     // fragment in the view if you want to pull out the HTML. Bear in 
     // mind, that if you do add to the ViewSlot - since nodes can only 
     // belong to 1 parent, they will be removed from the fragment in 
     // the resulting view (don't let this confuse you when debugging 
     // since Chrome shows a LIVE view of an object if you console.log(it)!) 

     // var vs = new ViewSlot(this.element, true); 
     // vs.add(result); 

     // Since you can't just get a fragments HTML as a string, you have to 
     // create an element, add the fragment and then look at the elements innerHTML...   
     var div = document.createElement('div'); 
     div.appendChild(result.fragment); 
     console.log(div.innerHTML); 
    }); 
    } 
} 

che dovrebbe farlo - e l'utilizzo:

<template> 
    <require from="load-view"></require> 
    <section> 
    <div load-view="view.bind: 'view-to-load.html'; view-model.bind: { someData: 'test' }"></div> 
    </section> 
</template> 

E infine view-to-load.html

<template> 
    <div> 
    this is the template... ${someData} 
    </div> 
</template> 

Ovviamente, questo non deve essere un attributo personalizzato: è possibile iniettare i bit e compilarli in una classe helper o qualcosa di simile (che può solo restituire la stringa HTML non formattata).

Ciò renderebbe l'equivalente della vostra makeItHappen funzione del metodo attached nell'attributo personalizzato. Ovviamente sono necessari tutti i deps, quindi è necessario avere almeno il supporto per l'iniezione delle dipendenze di Aurelias per impossessarsene.

Nota: Io suggerirei di usare sempre un ViewSlot se si pensa di aggiungere il contenuto al DOM (ammesso che abbiate un elemento che può agire come l'ancora) dato che è il modo in cui funziona Aurelia e avrà più risultati coerenti dal momento che ViewSlots sa come aggiungere/rimuovere i nipoti con grazia

Questo potrebbe non essere possibile nel caso in cui si abbia un plug-in di terze parti che accetta stringhe come input del modello - ma se possibile cercare i punti di estensione che funzionano con i nodi DOM anziché.