私の小さなシングルページアプリでは、ファイルをコンパイルするためにハンドルバーと Grunt.js を使用しています。指定されたフォルダーをスキャンし、特定の 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
どんな助けでも大歓迎です