使用grunt把手与ember一起使用，将模板分割为单独的文件 [英] Using grunt handlebars together with ember, to split templates in separate files

问题描述

由于我们正在使用yeoman / grunt，因此我试图将我的ember.js句柄模板分成几个文件，以便使代码更易于管理。 ，我遇到了此手柄插件。我已经配置如下：

  handlebars：{
 compile：{
 options：{
命名空间：'JST'
}，
文件：{
'<％= yeoman.dist％> /scripts/templates.js'：[
' ;％= yeoman.app％> / templates / *。hbs'
]，
} 
} 
} 
  pre> 
 
 
如插件的使用示例部分所述。这是按预期工作，生成一个 dist / scripts / templates.js 文件。但是将模板放在JST命名空间中，使它们不再能够访问Ember。这是我收到的错误：
 未捕获错误：断言失败：您指定了< App.ApplicationView的templateName应用程序： ember312>，但不存在。 
  
有些问题：
 
 
 
 
 
如何在codetemplates.js 中把模板初始化，以便Ember可以找到它们？
 
 
如何将模板放在DOM中，如何将模板放在DOM中，因为模板现在不在文档正文中？
 
 
 
 
 
这是我的index.html：
 <！DOCTYPE html> 
<！ -  [if lt IE 7]> < html class =no-js lt-ie9 lt-ie8 lt-ie7>百分比抑制率ENDIF]  -  GT！; 
<！ -  [if IE 7]> < html class =no-js lt-ie9 lt-ie8>百分比抑制率ENDIF]  -  GT！; 
<！ -  [if IE 8]> < html class =no-js lt-ie9>百分比抑制率ENDIF]  -  GT！; 
<！ -  [if gt IE 8]><！ - > < html class =no-js> <！ - <！[ENDIF]  -  GT; 
< head> 
< meta charset =utf-8/> 
< meta http-equiv =X-UA兼容content =IE = edge，chrome = 1/> 
< title>< / title> 
< meta name =descriptioncontent =/> 
< meta name =viewportcontent =width = device-width/> 
 
<！ -  build：css styles / main.css  - > 
< link rel =stylesheethref =styles / bootstrap.min.css/> 
< link rel =stylesheethref =styles / css / font-awesome.min.css/> 
< link rel =stylesheethref =styles / font-styles.css/> 
< link rel =stylesheethref =styles / main.css/> 
<！ -  endbuild  - > 
 
< / head> 
< body> 
 
<！ -  [if lt IE 7]> 
< p class =chromeframe>您使用的是过时的浏览器。 < a href =http://browsehappy.com/>今天升级浏览< / a>或< a href =http://www.google.com/chromeframe/?redirect=true>安装Google Chrome浏览器内嵌框架< / a>以更好地体验本网站。< / p> 
<！[endif]  - > 
 
<！ - 在此添加您的网站或应用内容 - > 
 
<！ - 我的模板过去是在这里，但现在他们在templates.js  - > 
 
< div class =pagination> 
< ul> 
< li>< a href =＃>上一个< / 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.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> 
  
 
 
解决方案
 
 
 
由于我们正在使用yeoman / grunt，我碰到过这个手柄插件。
 
 
这是什么让你失望。您正在尝试使用 grunt-contrib-handlebars 插件，结果已编译的模板未添加到 Ember.TEMPLATES 中。可以配置 grunt-contrib-handlebars 来实现这一点，但可能会更容易使用（grunt-ember-templates）[ https://github.com/dgeb/grunt-ember-templates] 。
 
 
 
请参阅 Ember.js如何引用Grunt.js预编译的Handlebars模板？更多细节
 
 
我如何初始化句柄模板，这是正确的还是在templates.js中，以便Ember可以找到它们？
 
 
 Ember不关心如何进入Ember .TEMPLATES。您可以手动添加/删除模板。例如：
  Ember.TEMPLATES ['myFunkyTemplate'] = Ember.Handlebars.compile（'Hello {{personName}}' ）; 
  
 
 
 
 
 
如何告诉我们将模板放在DOM中，因为模板现在不在文档正文中？
 
 
模板来自哪里，所有的ember都是模板的id。  application.hbs 模板将被渲染到应用程序的根元素（默认情况下为document.body），所有其他模板都将通过视图助手等渲染到插座中。 p> 
I am trying to split my ember.js handlebars templates in several files, in order to make the code base more manageable.

Since we are using yeoman/grunt, I have come across this handlebars plugin. I have configured it as follows:
    handlebars: {
        compile: {
            options: {
                namespace: 'JST'
            },
            files: {
                '<%= yeoman.dist %>/scripts/templates.js': [
                    '<%= yeoman.app %>/templates/*.hbs'
                ],
            }
        }
    }
As suggested in the "Usage examples" section of the plugin. This is working as expected, generating a dist/scripts/templates.js file. But putting the templates in the 'JST' namespace makes them not accessible anymore to Ember. This is the error I am getting:
Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.
Some questions:


How can I "initialize" the handlebars templates, which are right now in templates.js, so that Ember can find them?
How can I tell ember where to place the templates in the DOM, since the templates are now out of the document body?


This is my 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>

解决方案

  
Since we are using yeoman/grunt, I have come across this handlebars plugin.
That's what is tripping you up. You're trying to use the grunt-contrib-handlebars plugin, and as a result compiled templates are not being added to Ember.TEMPLATES. It may be possible to configure grunt-contrib-handlebars to make this happen, but it would probably be easier to use (grunt-ember-templates)[https://github.com/dgeb/grunt-ember-templates] instead.

See How does Ember.js reference Grunt.js precompiled Handlebars templates? for more detail

  
How can I "initialize" the handlebars templates, which are right nor in templates.js, so that Ember can find them?
Ember does not care how things get into Ember.TEMPLATES. You can add/remove templates from it manually. For example:
Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');



  
How can I tell ember where to place the templates in the DOM, since the templates are now out of the document body?
It doesn't matter where your templates come from, all ember looks at is the template's id. The application.hbs template will be rendered into your application's root element (document.body by default) and all other templates are rendered into outlets, via view helpers, etc.

                        
这篇关于使用grunt把手与ember一起使用，将模板分割为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！