Generowanie nieprzetworzonego ciągu HTML z pliku komponentu i modelu widoku

Question

Mamy szablon podobny do tego.

the-template.html

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

Chcemy zrobić to z nim.

pewne-file.ts

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

Co jest odpowiednikiem naszego makeItHappen funkcji?

Answer 1

Ok, więc tutaj jest sedno: https://gist.run/?id=d57489d279b69090fb20938bce614d3a

Oto kod w przypadku, gdy znika (z komentarzem):

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); 
    }); 
    } 
} 

To powinno wystarczyć - i użytkowanie:

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

I na koniec view-to-load.html

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

Oczywiście, nie musi to być atrybut niestandardowy - możesz po prostu wstrzyknąć bity i skompilować je w klasie pomocnika lub coś w tym stylu (które może po prostu zwrócić surowy ciąg HTML).

To spowoduje, że odpowiednik funkcji makeItHappen będzie zgodny z metodą niestandardową w metodzie attached. Oczywiście potrzebujesz wszystkich depów, więc potrzebujesz przynajmniej wsparcia wtrysku Aurelias, aby je zdobyć.

Uwaga: Sugeruję zawsze stosując ViewSlot jeśli planujemy dodanie treści do DOM (zakładając, że masz element, który może działać jako kotwica), ponieważ jest to sposób Aurelia działa i będzie miał więcej spójne wyniki, ponieważ ViewSlots wiedzą, jak dodawać/usuwać wnuki z wdziękiem

Może to być niemożliwe w przypadku, gdy masz wtyczkę innej firmy, która akceptuje ciągi znaków jako dane wejściowe szablonu - ale jeśli to możliwe, poszukaj punktów rozszerzeń współpracujących z węzłami DOM zamiast.