使用grunt把手和ember,将模板拆分为单独的文件

Question

使用grunt把手和ember,将模板拆分为单独的文件

dan*_*ast 6 handlebars.js ember.js gruntjs

我试图将我的ember.js把手模板分成几个文件,以使代码库更易于管理.

由于我们使用yeoman/grunt,我遇到了这个把手插件.我已将其配置如下:

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

Run Code Online (Sandbox Code Playgroud)

正如插件的"用法示例"部分所示.这是按预期工作,生成一个dist/scripts/templates.js文件.但是将模板放在'JST'命名空间中使得它们不再可以访问Ember.这是我得到的错误:

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

Run Code Online (Sandbox Code Playgroud)

一些问题:

如何"初始化"现在的把手模板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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mik*_*tti 12

由于我们使用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}}');

Run Code Online (Sandbox Code Playgroud)

如何告诉ember将模板放在DOM中的位置,因为模板现在不在文档主体中？

模板的来源并不重要,所有的ember看起来都是模板的id.该application.hbs模板将被渲染到应用程序的根元素(默认情况下document.body的)和所有其他模板被解析到网点,通过视图助手等.

归档时间：	13 年，1 月前
查看次数：	1959 次
最近记录：	10 年，10 月前