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

Question

Les cadres MVC permettent toujours de stocker les vues dans des fichiers séparés et de les récupérer. Comment cela est-il censé être accompli dans Ember.js ? J'ai cherché pendant des heures, donc si vous voulez voter contre cette question comme une sorte de doublon, s'il vous plaît au moins un lien vers une question ou une ressource qui fournit une réponse définitive et directe.

Par exemple, Ember crée automatiquement un contrôleur d'index, et rend automatiquement l'élément index si vous indiquez un {{outlet}} tant que l'url est / donc je ne devrais pas avoir besoin de code autre que window.App = Ember.Application.create(); dans mon app.js pour cette fonctionnalité. Comment puis-je créer un fichier séparé tel que index.handlebars et faire en sorte qu'Ember le trouve et le rende ?

Answer 1

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 il 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...

Answer 2

Vous pouvez utiliser JQuery.ajax pour charger le fichier texte et ensuite Ember.Handlebars.compile pour créer un modèle à partir de celui-ci :

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

Answer 3

Il est tout à fait normal de diviser 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 question de l'OS, qui comprend des liens vers deux techniques différentes de mise en page de votre application en fonction de votre choix de technologie côté serveur :

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

Answer 4

C'est un peu tard, mais je vais ajouter ceci pour tous ceux qui se trouvent ici.

Handlebar Template Precompiling est probablement ce que vous recherchez. Alors que normalement vous finissez par ajouter <script type="text/x-handlebars"> dans le fichier principal de l'application, vous pouvez également utiliser Handlebars pour les transposer en chaînes Javascript et les stocker ensuite dans le fichier Ember.TEMPLATES .

Cela présente plusieurs avantages : le code est plus propre, etc. mais vous pourrez également utiliser la version d'exécution de Handlebars, ce qui permettra de réduire la bibliothèque d'exécution requise et de réaliser des économies importantes en évitant de compiler le modèle dans le navigateur.

vérifier 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.

Answer 5

Ma solution à ce problème est d'utiliser un langage de compilation côté serveur comme Jade (car j'utilise ember avec nodejs) avec la fonction Includes. Vous pouvez écrire chaque modèle de guidon comme des fichiers séparés et les inclure pendant la compilation. Document connexe sur Jade : https://github.com/visionmedia/jade#a13

Vous pouvez également utiliser Require.js pour inclure d'autres fichiers js. Question connexe .