Utiliser des fichiers de modèle dans Ember.js

MVC cadres de toujours autoriser les points de vue à être stockées dans des fichiers distincts et récupéré. Comment est-ce censé être accompli dans Ember.js? J'ai cherché pendant des heures, donc si vous voulez voter cela comme une sorte de double, s'il vous plaît au moins un lien à une question ou à une ressource qui fournit définitif, réponse simple.

Par exemple, Ember crée automatiquement un index contrôleur, et rend automatiquement les index du modèle si vous indiquez un {{outlet}} tant que l'url est /, donc je ne devrais pas besoin d'un code autre que window.App = Ember.Application.create(); dans mon app.js pour cette fonctionnalité. Comment puis-je créer un fichier séparé tels que l'indice.le guidon et les ont Braise trouver et de le rendre?

Si vous souhaitez conserver vos templates en HTML, créer un <script> tag sans le nom d'un modèle. Il sera automatiquement compilé et ajouté à l'écran
Merci Nikita, mais la clé ici est de stocker des modèles dans des fichiers séparés. Même une petite application qui va rapidement devenir fastidieux si les modèles sont stockés dans index.html. Je suis vraiment surpris de voir comment beaucoup de gens considèrent cela comme une sorte de meilleure pratique.
De toute façon, il n'est pas mauvais de garder tous les modèles dans index.html si vous écrivez une petite application.
Hey, pour chaque son (ou ses) propre 🙂 Pour tous ceux qui lisent ceci, l'marqué réponse fonctionne probablement, mais plus de réponse simple est que de Braise n'a tout simplement pas gérer des vues séparées à la naissance. Pas encore, de toute façon.
Il ressemble dupliqué à stackoverflow.com/questions/8776151/ember-js-and-requirejs/...
erquhart, L'approche standard consiste à utiliser un outil de génération pour composer l'ensemble de vos fichiers js en un seul. Beaucoup de gens dans la Braise de la communauté à utiliser les Rails pour ce faire, il y a aussi des Node.js en fonction des solutions à l'aide de Grognement qui j'ai lié dans ma réponse
Merci pour la remarque aussi cette

InformationsquelleAutor Shawn Erquhart | 2013-02-07

ember.js

7

Vous pouvez utiliser JQuery.ajax de charger le fichier texte et puis Ember.Handlebars.compile pour créer un modèle à partir d'elle:
```
$.ajax({
   url: 'http://example.com/path/to/your/file',
   dataType: 'text',
   success: function (resp) {
       MyApp.MyView = Ember.View.extend({
           template: Ember.Handlebars.compile(resp),
       });
   }
});
```
- C'est la meilleure suggestion pour l'instant, donc je vais le marquer comme réponse. Pour toute personne traitant avec cette Braise, c'est une des nombreuses questions qui m'ont aidé à décider de revenir à Angulaires. C'est exaspérant à la fois, mais il est certainement le plus capable de cadre pour CRUD apps.
- Cela fonctionne très bien pour moi... mais seulement si j'utilise async: true de @joellord réponse, ci-dessous. Si je fais pas utiliser async: true, mes modèles ne sont pas rendus.
- Que dois-je faire avec MyApp.MyView après l'AJAX a terminé? Aussi le manque de soutien dans la Braise, est étonnante. Et pas étonnant que Shawn a repris Angulaire. Je suis envisagent de faire de même.
InformationsquelleAutor Shimon Rachlenko

Afin de précontrainte mes modèles, j'ai utilisé le code suivant dans mon application. Il utilise jQuery pour ajouter les modèles pour le fichier, puis lance l'application. Le code pourrait utiliser un peu de peaufinage, mais ça 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...

Le asnync: false partie aidé. Merci!
Vous devriez faire $.each(templates ...); pas d'emballage de votre modèle dans un objet jQuery
Si jamais vous vous trouvez à Tel-Aviv - je vous achète une bière

InformationsquelleAutor Joel Lord

3

C'est certainement la norme de diviser votre JS en plusieurs fichiers, et ensuite utiliser un processus de construction à les réunir. Jetez un oeil à cette réponse à l'autre Question, qui comprend des liens pour les deux techniques différentes pour poser votre candidature, en fonction de votre choix de la technologie côté serveur:

EmberJS: Bonne séparation des préoccupations pour les Modèles, les Magasins, les Contrôleurs, les Vues dans une application complexe?

InformationsquelleAutor ianpetzer
3

Un peu en retard mais je vais ajouter cette voici pour tous ceux qui trouve leur chemin ici.

Guidon Modèle de Précompilation est probablement votre recherche. Alors que normalement vous finissez en ajoutant <script type="text/x-handlebars"> tags dans le fichier de l'application principale, vous pouvez également utiliser le Guidon à les transposer dans les chaînes de caractères Javascript et de les stocker dans Ember.TEMPLATES.

Cela a quelques avantages que le code est plus propre, etc, mais aussi, vous serez en mesure d'utiliser la version d'exécution de Guidon qui aura pour résultat un plus petit nécessaire de la bibliothèque d'exécution et d'importantes économies pour ne pas avoir à compiler le modèle dans le navigateur.

découvrez 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.

InformationsquelleAutor thisbeme
0

Ma solution c'est d'utiliser côté serveur de la compilation des langages comme le Jade (que je suis en utilisant la braise avec nodejs) avec Inclut la fonctionnalité. Vous pouvez écrire chaque guidon de modèle en tant que fichiers distincts et de les inclure lors de la compilation.
Liées Jade document: https://github.com/visionmedia/jade#a13

Ou vous pouvez utiliser Require.js pour inclure d'autres fichiers js, il y a un une question relative à la.
- J'ai entendu parler de gens à l'aide du côté serveur, et approche - mais qui semble vraiment à l'encontre de la finalité de l'utilisation d'un stable, mvc côté client.
InformationsquelleAutor inDream
0

Je ne suis pas sûr que je suis à la compréhension de votre question, mais si vous vous demandez ce que je pense, vous vous posez la question, alors que vous souhaitez donner à votre .guidon document a data-template-name dans le script tag: <script ... data-template-name="index">...</script>
- donc, si j'ai un nom, de braise saisit automatiquement l'index.guidon de mon root dir - qui fait sens, les docs le faire paraître comme le data-template-name attribut vérifie simplement pour les modèles qui sont explicitement définis dans les fichiers js. Je n'ai pas encore testé mais je suppose que cela fonctionne merci!
- Pas d'attente, qui ne fonctionne pas. J'ai entendu aujourd'hui cinq distinctes et séparées, des réponses à cette question, entre ici, les différentes sources du web et de la #emberjs irc. Je n'ai pas envie de lier le tout par la spécification d'un modèle de nom, depuis que j'ai des balises de script enveloppant tout le corps, et voudrais seulement swap dans les différents modèles de la {{outlet}}. c'est Ce qui est recommandé dans la documentation.
- Shawn veut faire quelque chose comme cela, je pense (moi): {{partial 'templates/settings.html' action 'users/:id/settings'}} Est-il rien de semblable à ce qui fonctionne?
InformationsquelleAutor Wildhoney

Vous devez vous connecter pour publier un commentaire.