web-dev-qa-db-fra.com

Utilisation de fichiers de modèles distincts dans Ember.js

Les frameworks MVC permettent toujours de stocker les vues sous forme de fichiers séparés et de les récupérer. Comment cela est-il supposé être accompli dans Ember.js? Cela fait des heures que je cherche, donc si vous voulez voter en double, veuillez au moins renvoyer à une question ou à une ressource fournissant une réponse définitive et simple.

Par exemple, Ember crée automatiquement un contrôleur d'index et rend automatiquement le modèle index si vous indiquez un {{outlet}} tant que l'URL est /. Par conséquent, je n'aurais besoin d'aucun code autre que window.App = Ember.Application.create(); dans mon app.js pour cette fonctionnalité. Comment créer un fichier séparé tel que index.handlebars et qu'Ember le trouve et le rende?

ember.js
29
Shawn Erquhart

Vous pouvez utiliser JQuery.ajax pour charger un fichier texte, puis Ember.Handlebars.compile pour en créer un modèle:

$.ajax({
   url: 'http://example.com/path/to/your/file',
   dataType: 'text',
   success: function (resp) {
       MyApp.MyView = Ember.View.extend({
           template: Ember.Handlebars.compile(resp),
       });
   }
});
7
Shimon Rachlenko

Afin de précharger mes modèles, j'ai utilisé le code suivant dans mon application. Il utilise jQuery pour ajouter les modèles au fichier, puis lance l'application. Le code pourrait être modifié, mais cela fonctionne pour moi ...

var loaderObj = {

    templates : [
    '_personMenu.html',
    'application.html',
    'index.html',
    'people.html',
    'person.html',
    'people/index.html',
    'friend.html'
]
};

loadTemplates(loaderObj.templates);
//This function loads all templates into the view
function loadTemplates(templates) {
    $(templates).each(function() {
        var tempObj = $('<script>');
        tempObj.attr('type', 'text/x-handlebars');
        var dataTemplateName = this.substring(0, this.indexOf('.'));
        tempObj.attr('data-template-name', dataTemplateName);
        $.ajax({
            async: false,
            type: 'GET',
            url: 'js/views/' + this,
            success: function(resp) {
                tempObj.html(resp);
                $('body').append(tempObj);                
            }
        });
    });

}

var App = Ember.Application.create();
//Rest of the code here...
17
Joel Lord

Un peu tard, mais je vais l'ajouter ici à quiconque trouve son chemin ici. 

Le modèle de guidon Precompiling est probablement ce que vous cherchez. Normalement, si vous ajoutez des balises <script type="text/x-handlebars"> dans le fichier principal de l'application, vous pouvez également utiliser le guidon pour les transposer en chaînes Javascript, puis les stocker dans Ember.TEMPLATES. 

Cela présente quelques avantages, car le code est plus propre, etc., mais vous pourrez également utiliser la version d'exécution de Handlebars, ce qui réduira la bibliothèque d'exécution requise et réduira de manière significative le coût de la compilation du modèle dans le navigateur.

consultez http://handlebarsjs.com/precompilation.html & http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/ #what_is_handlebars_template_precompiling pour plus d'informations.

3
thisbeme

C'est la norme de scinder votre JS en plusieurs fichiers, puis d'utiliser un processus de construction pour les assembler. Jetez un coup d’œil à cette réponse à une autre SO Question qui inclut des liens vers deux techniques différentes pour présenter votre application en fonction de votre choix de technologie côté serveur:

EmberJS: Bonne séparation des problèmes entre modèles, magasins, contrôleurs et vues dans une application plutôt complexe?

3
ianpetzer

Ma solution consiste à utiliser un langage de compilation côté serveur, tel que Jade (comme j'utilise ember avec nodejs) avec la fonction includes. Vous pouvez écrire chaque modèle de guidon sous forme de fichiers distincts et les inclure lors de la compilation. Document Jade associé: https://github.com/visionmedia/jade#a13

Ou vous pouvez utiliser Require.js pour inclure d'autres fichiers js, il y a un question liée .

0
inDream

Je ne suis pas sûr de comprendre votre question, mais si vous demandez ce que je pense que vous demandez, vous donneriez alors à votre document .handlebars un data-template-name dans la balise script: <script ... data-template-name="index">...</script>

0
Wildhoney