Dynamische Kompilierung einer HTMLBars-Vorlage zur Laufzeit in Ember

Question

Ich möchte eine HTMLBars-Vorlage zur Laufzeit auf dem Client in Ember dynamisch kompilieren (und dann rendern). Wie kann ich das machen?

Answer 1

Da Ember 2.10 jetzt Glimmer verwendet, könnte es hier ein wenig schwierig werden. Um eine Vorlage zu erstellen, müssen Sie ember-template-compiler.js zu Ihrer Anwendung hinzufügen. Ich würde empfehlen, ember-browserify und ember-source zu verwenden.

Importieren Sie den Compiler in Ihrer Steuerung wie folgt.

import Ember from 'ember'; 
import Compiler from 'npm:ember-source/dist/ember-template-compiler'; 

export default Ember.Controller.extend({ 
    compileContent() { 
    const template = Compiler.compile(this.get('dynamicContent')); 
    Ember.TEMPLATES[`YOUR_TEMPLATE_NAME`] = template; 
    }, 
    // we observe content changes here 
    contentDidUpdate: Ember.observer('dynamicContent', function() { 
    this.compileContent(); 
    }), 
}); 

Wie getestet haben, können Sie Ihre Inhalte nichts von Ember Helfer zu Ihrer benutzerdefinierten Komponenten enthalten, auch Ihre Aktion Bindungen.

z.B.

<ul> 
    <li>{{#link-to 'index'}}Home{{/link-to}}</li> 
</ul> 
<div {{action 'yourCustomAction'}}> 
    {{your-custom-component params=yourCustomParams model=model flag=true}} 
</div> 

Nun lassen Sie uns in Ihrer Vorlage, die Magie tun, indem Sie {{partial}} Helfer.

... 

{{partial 'YOUR_TEMPLATE_NAME'}} 

... 

Diese Methode in Ember 2.13 ohne deprecation Warnungen funktioniert, sollte es in Zukunft Updates. Bitte beachten Sie, dass Ember.TEMPLATES eine globale Variable ist und die Engine es irgendwie zu cachen scheint, also weisen Sie dem bestehenden keine neuen Werte zu.

Answer 2

Gebäude aus der Kingpin2K Antwort auf Compile template client side in ember using HTMLbars:

Für einigen Hintergrund könnte es nützlich sein, zurück zu Compiling Templates with Ember 1.10 zu verweisen. Wir müssen immer noch ember-template-compiler.js laden. Fügen Sie

app.import('bower_components/ember/ember-template-compiler.js'); 

zu Ihrer ember-cli-build.js hinzu.

Dann können Sie eine Komponente wie folgt schreiben:

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    layout: Ember.computed(function() { 
    return Ember.HTMLBars.compile(
     '{{foo-bar}} <span>' + 'hello' + '</span>' 
    ); 
    }), 

}); 

Diese Lösung wird in Zukunft relases von Ember wahrscheinlich brechen, je nachdem, wie die Ember Template Erstellung Prozessänderungen mit dem Aufkommen von Glimmer 2.

Answer 3

Ich bin zur Zeit auf Ember-2.9.x und ich brachte in dem neuesten Lenker mit meinem bower.json:

"handlebars": "^4.0.0" 

Und fügte hinzu, es dann über meine ember-cli-build.js Datei:

app.import('bower_components/handlebars/handlebars.js'); 

Dies hat arbeitete für meine typeahead Komponente und ich sehe keinen Grund, warum dies nicht funktioniert, wenn Sie mit Glimmer2 auf Ember-2.10 aktualisieren.

Answer 4

Seit Ember 2.13+ (ohne Bower von Standard) müssen Sie in Ihrem glut-cli-build.js hinzuzufügen:

app.import('vendor/ember/ember-template-compiler.js'); 

Für Ember Version vor 2.10 Sie es über bower aufnehmen müssen (auch auf ember-cli-build.js)

app.import('bower_components/ember/ember-template-compiler.js'); 

Und auf dem Code, den Sie müssen:

Ember.TEMPLATES['mycompiledcode'] = Ember.HTMLBars.compile('{{foo-bar}} <span>' + 'hello' + '</span>'); 

In der hbs-Datei Aufruf:

{{partial 'mycompiledcode'}} 

Oder Sie eine Komponente wie folgt machen:

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    layout: Ember.computed(function() { 
    return Ember.HTMLBars.compile(
     '{{foo-bar}} <span>' + 'hello' + '</span>' 
    ); 
    }), 

}); 

Basierend auf der Lösung einer anderen Antwort https://stackoverflow.com/a/37345099/6505594