将 grunt 把手与 ember 一起使用，将模板拆分为单独的文件答案

【问题标题】：Using grunt handlebars together with ember, to split templates in separate files将 grunt 把手与 ember 一起使用，将模板拆分为单独的文件
【发布时间】：2013-04-08 10:38:03
【问题描述】：

我正在尝试将我的 ember.js 车把模板拆分为多个文件，以使代码库更易于管理。

由于我们使用的是 yeoman/grunt，所以我遇到了this 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 可以找到它们？
我如何告诉 ember 在 DOM 中放置模板的位置，因为模板现在不在文档正文中？

这是我的 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>

【问题讨论】：

只是好奇 - 你的后端是什么？

标签： ember.js handlebars.js gruntjs

【解决方案1】：

由于我们使用的是 yeoman/grunt，所以我遇到了这个车把插件。

这就是绊倒你的原因。您正在尝试使用grunt-contrib-handlebars 插件，结果编译的模板没有被添加到Ember.TEMPLATES。可以配置grunt-contrib-handlebars 来实现这一点，但它可能更容易使用 (grunt-ember-templates)[https://github.com/dgeb/grunt-ember-templates]。

详情请见How does Ember.js reference Grunt.js precompiled Handlebars templates?

我怎样才能“初始化”把手模板，这些模板既不在templates.js中，也不在templates.js中，以便Ember可以找到它们？

Ember 不关心事情是如何进入 Ember.TEMPLATES 的。您可以手动添加/删除模板。例如：

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

由于模板现在不在文档正文中，我如何告诉 ember 将模板放在 DOM 中的什么位置？

无论您的模板来自何处，所有 ember 都会查看模板的 id。 application.hbs 模板将被渲染到应用程序的根元素（默认为 document.body）中，所有其他模板通过视图助手等渲染到 outlet。

【讨论】：

谢谢。我现在正在尝试配置grunt-ember-templates。我已经用npm install grunt-ember-templates 安装了它，我已经在我的Gruntfile.js 中配置了它，但它不能作为 grunt 任务使用。执行grunt --help 显示了许多可用任务（包括我安装的旧handlebars），但ember_templates 没有出现。为什么会这样？ npm -ls 向 npm ERR! extraneous: grunt-ember-templates@0.4.4 .../node_modules/grunt-ember-templates' 投诉
回答我自己的问题：grunt-ember-templates 没有添加到我的应用程序 package.json 中，所以我不得不手动添加它。奇怪，因为我很确定其他包已经自动添加到应用程序的 package.json 中。
很高兴这对你有用。回复：添加到 package.json，如果您在安装依赖项时添加 --save 或 -S，npm 将执行此操作。例如$ npm install grunt-ember-templates --save