文章/答案/技术大牛

发布

社区首页 >问答首页 >如何实例化Ember应用程序在将预编译的模板与grunt ember-template一起使用时

问如何实例化Ember应用程序在将预编译的模板与grunt ember-template一起使用时
EN

Stack Overflow用户

提问于 2013-04-09 17:40:43

回答 2查看 1.2K关注 0票数 2

(这个问题是和this one相关的，但现在我已经从grunt-contrib-handlebars转到了grunt-ember-templates )

我正在尝试将我的ember.js handlebars模板拆分成几个文件，以便使代码库更易于管理。我使用的是grunt-ember-templates，配置如下：

ember_templates: {
    compile: {
        options: {
            templateName: function(sourceFile) {
                return sourceFile.replace(/app\/templates\//, ''); // <%= yeoman.dist %>/scripts/
            }
        },
        files: {
            '<%= yeoman.dist %>/scripts/templates.js': [
                '<%= yeoman.app %>/templates/**/*.hbs'
            ]
        }
    }
}

这就像预期的那样创建了一个dist/scripts/templates.js，我的客户端很高兴地加载了它。templates.js如下所示：

Ember.TEMPLATES["accounts"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
    ...

这对我来说很好:模板保存在Ember.TEMPLATES数组中，带有预期的键。在生成的templates.js文件下面甚至还有一个application密钥：

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {

它来自于templates/application.hbs

<section class="toolbar">
</section>
<section class="main_section">
  <nav>
      ...
  </nav>

  {{ outlet }}

</section>

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      ...
</div>

尽管如此，在加载templates.js (它实际上嵌入在scripts.js中，请参见下面的index.html)时，我还是收到了这个错误：

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

这个严重的错误是什么意思，我怎样才能摆脱它？

这是我的Ember Application

this.App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    VERSION: '1.0.0',
    ready: function () {
        console.log('App version: ' + App.VERSION + ' is ready.');
    }
});

这是我的ApplicationView

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

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

handlebars.js

gruntjs

ember.js

回答 2

Stack Overflow用户

发布于 2013-04-10 16:31:41

郑重声明:我的问题已经通过改变javascript文件的加载顺序得到了解决。

templates.js必须在加载ember之后加载。

我认为ember需要在加载之前定义模板，但这实际上是完全错误的:因为模板存储在Ember.TEMPLATES中，所以ember必须在加载模板之前进行加载。然后可以加载模板，然后可以创建应用程序。

我之前没有发现这个bug的原因是ember在控制台中根本没有抱怨。

票数 2

Stack Overflow用户

发布于 2013-04-09 18:54:39

我一直在使用template:而不是templateName:，它似乎工作得很好：

template: Ember.TEMPLATES['application']

也许有一种更好的方法可以做到这一点。但这至少会让你解脱。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15898551

复制

相似问题

问如何实例化Ember应用程序在将预编译的模板与grunt ember-template一起使用时
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实例化Ember应用程序在将预编译的模板与grunt ember-template一起使用时EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实例化Ember应用程序在将预编译的模板与grunt ember-template一起使用时
EN