Question

我正在尝试为我的项目设置一个可以使用车把模板的基础，但是问题是当我编译.hbs时，输出的html文件没有数据。

但是当我在html文件中使用相同的代码而不使用gulp时，数据将显示。

非常困惑，因为看起来在编译时数据是条带化或被忽略。

这是我的.hbs文件：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<script id="handlebars-demo" type="text/x-handlebars-template">
<div>
My name is {{name}}. I am a {{occupation}}. 
</div>
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

var template = $('#handlebars-demo').html();

var context = { "name" : "Ritesh Kumaraaaaaaa", "occupation" : "developer" };

var templateScript = Handlebars.compile(template);

var html = templateScript(context);

$('body').append(html);
});
</script>

</body>   
</html>

这是gulpfile.js代码：

const gulp = require('gulp');
const handlebars = require('gulp-compile-handlebars');
const rename = require('gulp-rename');

gulp.task('html', () => {
return gulp.src('./src/pages/*.hbs')
.pipe(handlebars({}, {
    ignorePartials: true,
    batch: ['./src/partials']
}))
.pipe(rename({
    extname: '.html'
}))
    .pipe(gulp.dest('./dist'));
});

数据未使用Gulp和Handlebars JS代码进行编译

0 个答案: