Question

我已经使用grunt-ember-templates成功地将把手预编译到一个文件中，但是，当在html文件中包含source时：

<script src="templates/app/compiledTemplates.js" type="text/javascript"></script>

它说：

Resource interpreted as Script but transferred with MIME type text/plain: "file:///Users/jaime/voyant-svn/voyant-blocks/dev/blocks-web/src/main/webapp/templates/app/compiledTemplates.devjs".

包含预编译车把模板的正确方法是什么？

Answer 1

这就是我在我的应用中的表现：

<script type="text/javascript" charset="utf-8" src="dist/templates.js"></script>

您可以在此处查看整个index.html文件：

https://github.com/joachimhs/WarmCroc-Ember/blob/master/index.html

事实上，我今天刚刚在Ember.js的实时编码演示中编写了这段代码。该演讲被录制为截屏视频，可从http://emberjstraining.com

获取

本演讲应该为您提供正确设置所需的指针:)

Answer 2

我使用grunt将已编译的模板与我的其他脚本（jQuery / ember / ember-data /我的应用程序代码）结合起来。然后在我的index.html中，我只包含单个js脚本（也有助于减少http请求的数量）。

我目前正在使用grunt，一个简单的“构建”步骤可能如下所示。要使用它，您需要安装nodejs。接下来你将安装以下

grunt
grunt-cli
grunt-ember-template-compiler
grunt-contrib-concat

安装完这些后，如果将js放入名为“Gruntfile.js”的文件中，则可以从root运行下面的构建 - 然后只需执行“grunt”，它将输出deps.min.js（w /你的脚本和模板组合在一起）

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-ember-template-compiler');

  grunt.initConfig({
    concat: {
      dist: {
          src: [
            'website/static/website/script/vendor/handlebars-v1.2.1.js',
            'website/static/website/script/vendor/ember.min.js',
            'website/static/website/script/my-app.js’,
            'website/static/website/script/dist/tmpl.min.js'],
          dest: 'website/static/website/script/dist/deps.min.js'
      }
    },
    emberhandlebars: {
        compile: {
            options: {
                templateName: function(sourceFile) {
                    var newSource = sourceFile.replace('website/static/website/script/app/templates/', '');
                    return newSource.replace('.handlebars', '');
                }
            },
            files: ['website/static/website/script/app/templates/**/*.handlebars'],
            dest: 'website/static/website/script/dist/tmpl.min.js'
        }
    }
  });

  grunt.task.registerTask('default', ['emberhandlebars', 'concat:dist']);
};

包括预编译的ember车把模板

2 个答案: