braise hbs modèles en tant que fichiers distincts

Je veux courir ember.js (version Finale 1.0.0) exemples fournis sur leur première page.

Ils ont divisé chaque guidon modèle dans un fichier distinct avec .hbs extension.

Donc j'ai juste copié tout le code et les fichiers créés avec les mêmes noms. Quand je le lance, rien ne hapens. Je suis en train de ROUTAGE exemple.

Mon index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0.js"></script>
  <script src="js/libs/ember-1.0.0.js"></script>
  <script src="js/libs/bootstrap.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

Mes modèles sont à l'intérieur du répertoire racine et j'ai copié à /templates mais cela n'a pas aidé.

  • comment êtes-vous que le chargement hbs fichiers???
  • je n'ai pas les charger, à la pensée qu'ils sont chargés par le cadre
  • non, ils ne sont pas..vérifier ma solution...
InformationsquelleAutor Didar Burmaganov | 2013-09-02
  1. 23

    Lorsque vous avez des modèles dans différents fichiers, vous devez les charger et de les compiler comme EmberJS ne détecte pas les fichiers. Il ya quelques façons de le faire.

    1), les Charger à Ember.TEMPLATES:
    Braise charge les modèles et les pousse dans à un objet de Braise.MODÈLES. il stocke les modèles de contenu avec small name clé comme par EmberJS conventions de Nommage. Donc, nous ne pouvons pas pousser les modèles après leur compilation.

    Par exemple: Si vous avez un modèle avec le nom "post", la charge de la post.hbs fichier via une requête AJAX puis ensemble,

    //"data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)

    Alors maintenant, vous pouvez accéder au modèle directement comme

       {{partial 'post'}}

    dans le guidon ou définir comme templateName pour toutes les classes de vue.

    App.OtherView = Ember.View.extend({
   templateName: 'post'
});

    Ainsi, vous pouvez avoir à la fin de chargement de tous les HBS fichiers par le biais d'une requête AJAX et les compiler avant le chargement de votre application. C'est une grosse surcharge pour une application.

    Afin de faciliter cela, nous pouvons pré-compilation de tous les modèles et de les enregistrer comme JS(qui, en fait, pousse dans à la Braise.MODÈLES d'objet) et il suffit de charger que JS. Ceci peut être réalisé à l'aide d'un plug-in braise-modèles qui est également disponible comme un grognement d'emploi grunt-ember-modèles.

    2) La deuxième façon est de créer un objet de vue et de définir le code compilé pour le modèle de chaque vue après la requête AJAX. Le plug-in de texte de requirejs vous aide à le faire.

    Comme de nos jours les Braises de personnes suggèrent de ne pas créer un objet de vue, sauf si requis, je vous suggère de suivre la première voie. Précompilé est la meilleure option qui réduit beaucoup de travail chaque fois que vous créez un modèle.

    Mise à JOUR : Il y a un projet de construire des outils qui prend soin de compiler guidon modèles. Yeoman et Braise-Cli sont ceux que vous pouvez avoir un coup d'oeil une fois.

    • Merci, savez-vous de l'outil de chargement différé des modèles? Il serait utile si le projet aura beaucoup de modèles et de les charger au démarrage sera coûteux pour le client.
    • oui il existe un moyen de lazyload modèles...j'ai un lien qui, de fait, des détails sur lazyload JS fichiers, vous pouvez utiliser même pour les modèles...madhatted.com/2013/6/29/lazy-loading-with-ember
    • J'ai suivi la précompilation de modèles et de charger le fichier JS, mais je suis partie compatible problèmes avec ember-modèles, stackoverflow.com/questions/23403577/...
    InformationsquelleAutor thecodejack
  2. 3

    Je construis mes modèles avec Grunt. Il crée un template.js fichier dont j'ai la charge après la Braise.
    Ceci est mon propre Grunt config sur coffescript:

    module.exports = (grunt) ->
  tmpl_dir = 'app_src/templates'
  grunt.initConfig
    tmpl_dir: tmpl_dir
    ember_handlebars:
      options:
        processName: (path) ->
          re = new RegExp("^#{tmpl_dir}\/(.*)\.hbs$", 'i')
          r = path.match(re)
          path = r[1]
          path = path.replace /\_/g, '-'
          console.log '>', path
          path
      files:
        src: '<%= tmpl_dir %>/**/*.hbs'
        dest: 'public/js/templates.js'

  grunt.loadNpmTasks('grunt-ember-handlebars')
    InformationsquelleAutor Stanislav Ryahov
  3. 1

    Vous avez besoin soit de l'utilisation d'un processus de construction de la compilation de vos modèles et de les enchaîner la logique de l'application ou si vous avez besoin d'utiliser une sorte de résolution de module de mise en œuvre.

    Si vous êtes à l'aide de rails sur le back-end de vérifier ensuite https://github.com/emberjs/ember-rails
    Si non, découvrez https://github.com/stefanpenner/ember-app-kit et https://github.com/rpflorence/ember-tools

    • merci pour la réponse, je vais essayer d'outils! j'ai vu grunt qui peut minimiser les js et je pense qu'il serait agréable d'avoir de l'outil avant la production concats tous les modèles et minifies ou de rendre une logique spéciale, lorsque le modèle est demandé, puis de le charger et de le mettre en cache et après le chargement du cache
    InformationsquelleAutor ianpetzer