0

对于我的小型单页应用程序，我使用把手和 Grunt.js 来编译文件。我发现了一个grunt 模块，它扫描指定的文件夹并使用特定的 Handlebars.registerPartial 生成一个文件，但是当我编译我的文件时，我得到了

Uncaught Error: The partial templates/partials/footer could not be found

恐怕我弄乱了调用不同函数的顺序，但我不明白它是如何工作的。

我的 index.html

<!DOCTYPE html>
<html>
  <head>
    <title> My app </title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>

  <body>
  <script id="main-template" type="text/x-handlebars-template">​
  <h1> Hello i'm the main </h1>

    {{> templates/partials/footer }}    

  </script>

    <script type="text/javascript" src="javascript/app.js"> </script> 
  </body>
</html>

我的 app.js

[here I include handlebars.js]
var ai = {};

(function () {
  // init part
  var source   = $("#main-template").html();
  var template = Handlebars.compile(source);
  $(document.body).append(template());

})();

这是从我的 app.js 中不包含的模块生成的文件

module.exports = function (Handlebars) {
    function setup() {
        Handlebars.registerPartial("templates/partials/footer", require("./templates/partials/footer.hbs"));
    }

    return {
        setup: setup
    };
};

Gruntfile.js：

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-register-hbs-partials');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
    //check error in js files
      files: ['Gruntfile.js', 'javascript/scripts/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    concat: {
    //concat js files
      options: {
        separator: '\n/**********/\n'
      },
      dist: {
        src: ['javascript/libs/*.js', 'javascript/scripts/*.js'],
        dest: 'javascript/app.js'
      }
    },
    uglify: {
    //minify js files
      dist: {
        files: {
          'javascript/app.min.js': ['javascript/app.js']
        }
      }
    },
    register_partials: {
      //register hbs files as hbs partials
      default_options: {
          options: {
              extension: '.hbs'
          },
          files: {
              'templates/partials_default.js': [ 'templates/partials/footer.hbs', 'templates/partials/header.hbs']
          },
      }
    },
    watch: {
      files: ['javascript/scripts/*.js'],
      tasks: ['jshint', 'register_partials']
    }
  });

  grunt.registerTask('dev', ['jshint', 'register_partials', 'concat', 'watch']);
  grunt.registerTask('prod', ['jshint', 'register_partials', 'concat', 'uglify']);

};

footer.hbs 我是页脚

文件树：

- Gruntfile.js
- packages.json
- index.html
- templates
      |_ partials
             |_ footer.hbs

- javascript 
        |_app.js
              |_ handlebars.js
              |_ scripts/init.js

非常感谢任何帮助

4

0 回答 0