6

コードベースをより管理しやすくするために、ember.js ハンドルバー テンプレートをいくつかのファイルに分割しようとしています。

yeoman/grunt を使用しているので、この handlebars pluginに出会いました。次のように構成しました。

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

プラグインの「使用例」セクションで提案されているとおりです。これは期待どおりに機能し、dist/scripts/templates.jsファイルを生成します。しかし、テンプレートを 'JST' 名前空間に配置すると、Ember はテンプレートにアクセスできなくなります。これは私が得ているエラーです:

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

いくつかの質問：

  • 現在 にあるハンドルバー テンプレートを「初期化」してtemplates.js、Ember がそれらを見つけられるようにするにはどうすればよいですか?
  • テンプレートはドキュメント本体の外にあるため、テンプレートを DOM のどこに配置するかを ember に伝えるにはどうすればよいですか?

これは私の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>
4

1 に答える 1

12

yeoman/grunt を使用しているため、このハンドルバー プラグインに出会いました。

それがあなたをつまずかせているのです。grunt-contrib-handlebarsプラグインを使用しようとしており、その結果、コンパイルされたテンプレートが に追加されていませんEmber.TEMPLATES。これを実現するように構成することは可能かもしれませんが、代わりに(grunt-ember-templates)[ https://github.com/dgeb/grunt-ember-templates]grunt-contrib-handlebarsを使用する方がおそらく簡単でしょう。

Ember.js は Grunt.js プリコンパイル済みハンドルバー テンプレートをどのように参照しますか? を参照してください。詳細については

Emberがそれらを見つけることができるように、正しくないtemplates.jsにあるハンドルバーテンプレートを「初期化」するにはどうすればよいですか?

Ember は、Ember.TEMPLATES にどのように入るかは気にしません。テンプレートを手動で追加/削除できます。例えば：

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

テンプレートがドキュメント本体の外にあるため、テンプレートを DOM のどこに配置するかを ember に伝えるにはどうすればよいですか?

テンプレートがどこから来たかは関係ありません。ember が参照するのはテンプレートの ID だけです。application.hbsテンプレートはアプリケーションのルート要素 (デフォルトでは document.body) にレンダリングされ、他のすべてのテンプレートはビュー ヘルパーなどを介してアウトレットにレンダリングされます。

于 2013-04-08T12:30:13.557 に答える