Verwenden Sie den Grunzlenker zusammen mit Glut, um Vorlagen in separate Dateien zu teilen

Question

Apr 08, 2013, 12:38 PM

Verwenden Sie den Grunzlenker zusammen mit Glut, um Vorlagen in separate Dateien zu teilen

Ich versuche, meine ember.js-Lenkervorlagen in mehrere Dateien aufzuteilen, um die Codebasis übersichtlicher zu gestalten.

Da wir yeoman / grunt benutzen, bin ich rübergekommendieses Lenker-Plugin. 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 einedist/scripts/templates.js Datei. Durch das Einfügen der Vorlagen in den 'JST'-Namespace können sie jedoch nicht mehr von Ember verwendet werden. Dies ist der Fehler, den 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 die Lenkervorlagen "initialisieren", die sich gerade in befinden?templates.js, damit Ember sie finden kann?Wie kann ich ember mitteilen, wo die Vorlagen im DOM abgelegt werden sollen, da die Vorlagen jetzt nicht mehr im Dokumententext enthalten sind?

Das ist meine 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>