Ember.js avec modèle de guidon externe

Donc, je suis un peu nouveau chez Ember.js et ça fait quelques heures que je suis coincé avec ça. Je joue avec ce client bloggr et ce que je veux accomplir est de charger ces modèles de handlebars partir de fichiers externes.

Le modèle "à propos" doit être rendu lorsque l'utilisateur clique sur la page à propos du panneau. Voici le code en bref, donc vous ne devez pas creuser autant (je crois qu'il sera facile pour les utilisateurs expérimentés)

Modèle à l'intérieur. html comme indiqué dans l'exemple

 <script type="text/x-handlebars" id="about"> <div class='about'> <p>Some text to be shown when users click ABOUT.</p> </div>

Maintenant, ce que j'ai fait, c'est de retirer le code x-handlebar de la page html et de le placer (sans le <script type...> ) puis le mettre dans hbs/about.hbs

Maintenant, dans la page html, j'ai fait quelque chose comme ça.

 $.ajax({ url: 'hbs/about.hbs', async: false, success: function (resp) { App.About = Ember.View.extend({ template: Ember.Handlebars.compile(resp), }); } });

Le résultat de l'ajax contient le contenu de la page .hbs, alors je dois le compiler afin que Ember puisse le rendre, n'est-ce pas? Je pense que c'est ce que j'ai fait. Mais c'est aussi loin que je suis venu. Est ce que j'ai fait correctement? Quel est le prochain pas? Je crois que je dois ajouter le contenu de l'appel ajax au body .

Merci d'avance, après avoir parcouru SO, je n'ai toujours pas pu le faire fonctionner.

Vous pouvez joindre un modèle à l'objet des modèles disponibles simplement comme suit:

 Ember.TEMPLATES.cow = Ember.Handlebars.compile("I'm a cow {{log this}}");

Ou dans votre cas peut-être quelque chose comme ceci:

 var url = 'hbs/about.hbs', templateName = url.replace('.hbs', ''); Ember.$.ajax({ url: url, async: false, success: function (resp) { Em.TEMPLATES[templateName] = Ember.Handlebars.compile(resp); } });

Voici un exemple paresseux de la réalisation de l'application:

http://emberjs.jsbin.com/apIRef/1/edit

Pour être honnête, précompiler les modèles à l'avance (côté serveur) est plus performant pour l'utilisateur final.

La précompilation prend le guidon brut et le transforme en une pléthore d'instructions javascript pour l'utilisation lors de la construction de vos vues.

Lorsque DOM est prêt, Ember scanne le DOM pour les éléments de script du type "text / x-handlebars" et les appels compilent sur leur contenu. Il ajoute ensuite les résultats à l'objet Ember.TEMPLATES avec le nom de l'attribut data-template-name. Cela peut ajouter un temps de chargement totalement inutile à l'application.

Par exemple, lorsque nous avons envoyé "Je suis une vache {{log this}}", il a été converti en la méthode javascript suivante

 function anonymous(Handlebars,depth0,helpers,partials,data /**/) { this.compilerInfo = [4,'>= 1.0.0']; helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; var buffer = '', hashTypes, hashContexts, escapeExpression=this.escapeExpression; data.buffer.push("I'm a cow "); hashTypes = {}; hashContexts = {}; data.buffer.push(escapeExpression(helpers.log.call(depth0, "", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); return buffer; }

Minimisé à quelque chose de laid comme ceci:

 function anonymous(e,t,n,r,i){this.compilerInfo=[4,">= 1.0.0"];n=this.merge(n,Ember.Handlebars.helpers);i=i||{};var s="",o,u,a=this.escapeExpression;i.buffer.push("I'm a cow ");o={};u={};i.buffer.push(a(n.log.call(t,"",{hash:{},contexts:[t],types:["ID"],hashContexts:u,hashTypes:o,data:i})));return s}

En fonction de votre back-end, vous pouvez compiler et regrouper vos modèles avant la main et les envoyer dans le html afin que vous puissiez éviter de passer du temps à compiler les modèles client côté.