Verwenden von Grunt Lenker zusammen mit Ember, um Vorlagen in separaten Dateien zu teilen

Ich versuche, meine Ember.js Lenker Vorlagen in mehrere Dateien zu teilen, um die Code-Basis überschaubarer zu machen.Verwenden von Grunt Lenker zusammen mit Ember, um Vorlagen in separaten Dateien zu teilen

Da wir Yeoman/Grunt verwenden, bin ich auf this handlebars plugin gestoßen. Ich habe es wie folgt konfiguriert:

handlebars: { 
     compile: { 
      options: { 
       namespace: 'JST' 
      }, 
      files: { 
       '<%= yeoman.dist %>/scripts/templates.js': [ 
        '<%= yeoman.app %>/templates/*.hbs' 
       ], 
      } 
     } 
    }

Wie im Abschnitt "Verwendungsbeispiele" des Plugins vorgeschlagen. Dies funktioniert wie erwartet und erzeugt eine dist/scripts/templates.js Datei. Wenn Sie die Vorlagen jedoch in den Namensraum "JST" einfügen, sind sie für Ember nicht mehr zugänglich. Dies ist der Fehler Ich erhalte:

Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.

Einige Fragen:

Wie kann ich „initialisieren“, um die Lenker Vorlagen, die in templates.js jetzt sind, so dass Ember sie finden kann?
Wie kann ich ember sagen, wo die Vorlagen im DOM platziert werden sollen, da sich die Vorlagen jetzt außerhalb des Dokumententexts befinden?

Das ist mein index.html:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
    <meta charset="utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <title></title> 
    <meta name="description" content=""/> 
    <meta name="viewport" content="width=device-width"/> 

    <!-- build:css styles/main.css --> 
    <link rel="stylesheet" href="styles/bootstrap.min.css"/> 
    <link rel="stylesheet" href="styles/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="styles/font-styles.css"/> 
    <link rel="stylesheet" href="styles/main.css"/> 
    <!-- endbuild --> 

    </head> 
    <body> 

    <!--[if lt IE 7]> 
     <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> 
    <![endif]--> 

    <!-- Add your site or application content here --> 

    <!-- My templates used to be here, but now they are in templates.js --> 

     <div class="pagination"> 
      <ul> 
       <li><a href="#">Prev</a></li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">Next</a></li> 
      </ul> 
     </div> 
    </script> 

    <!-- build:js scripts/scripts.js --> 
    <script src="scripts/vendor/jquery-1.9.1.js"></script> 
    <script src="scripts/vendor/handlebars.1.0.rc.3.js"></script> 
    <script src="scripts/vendor/ember-1.0.0-rc.2.js"></script> 
    <script src="scripts/vendor/ember-data.js"></script> 
    <script src="scripts/vendor/bootstrap.min.js"></script> 
    <script src="scripts/templates.js"></script> 
    <script src="scripts/main.js"></script> 
    <!-- endbuild --> 

    </body> 
</html>

Quelle

2013-04-08 dangonfast

nur neugierig -was ist Ihr Backend? –

Da wir Yeoman/Grunzen verwenden, ich bin gekommen, über dieses Plugin Lenker.

Das ist, was Sie stolpert. Sie versuchen, das grunt-contrib-handlebars-Plugin zu verwenden, und als Ergebnis werden kompilierte Vorlagen Ember.TEMPLATES nicht hinzugefügt. Möglicherweise ist es möglich, grunt-contrib-handlebars zu konfigurieren, um dies zu ermöglichen, aber es wäre wahrscheinlich einfacher zu verwenden (Grunt-Ember-Vorlagen) [https://github.com/dgeb/grunt-ember-templates] stattdessen.

Siehe How does Ember.js reference Grunt.js precompiled Handlebars templates? für weitere Einzelheiten

Wie kann ich „initialisieren“, um die Lenker Vorlagen, die rechts noch in templates.js sind, so dass Ember sie finden kann?

Ember ist es egal, wie die Dinge in Ember.TEMPLATES kommen. Sie können Vorlagen manuell hinzufügen/entfernen. Zum Beispiel:

Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');

Wie kann ich sagen, Ember, wo die Vorlagen in dem DOM zu platzieren, da die Vorlagen nun aus dem Dokumentkörper sind?

Es spielt keine Rolle, woher Ihre Vorlagen kommen, alle Ember-Looks sind die ID der Vorlage. Die Vorlage application.hbs wird in das Root-Element Ihrer Anwendung gerendert (document.body standardmäßig) und alle anderen Vorlagen werden in Outlets gerendert, über View-Helfer usw.

Quelle

2013-04-08 12:30:13

Danke. Ich versuche nun 'grunt-ember-templates' zu konfigurieren. Ich habe es installiert mit 'npm install grunt-ember-templates', und ich habe es in meiner' Gruntfile.js' konfiguriert, aber es ist nicht als grunt task verfügbar. Doing 'grunt --help' zeigt viele verfügbare Aufgaben (einschließlich der alten' Lenker', die ich installiert hatte), aber 'ember_templates' erscheint nicht. Warum könnte das sein?'npm -ls' beschwert sich mit 'npm ERR! external: [email protected] .../node_modules/grunt-ember-templates'' – dangonfast

Meine Frage selbst beantworten: 'grunt-ember-templates' wurde meiner Applikation package.json nicht hinzugefügt, also hatte ich um es manuell hinzuzufügen. Seltsam, da ich mir ziemlich sicher bin, dass andere Pakete automatisch zum Paket.json der Anwendung hinzugefügt wurden. – dangonfast

Cool froh, dass es für dich funktioniert hat. Re: Wenn Sie zu package.json hinzufügen, wird npm das tun, wenn Sie --save oder -S hinzufügen, wenn Sie Ihre Abhängigkeit installieren. Also zum Beispiel '$ npm install grunt-ember-templates --save' –

Verwenden von Grunt Lenker zusammen mit Ember, um Vorlagen in separaten Dateien zu teilen

Antwort

Verwandte Themen