Question

我对此比较陌生，所以请原谅我是否遗漏了一些明显的观点...

我想使用Handlebars创建一个可重用的小部件，为简单起见，我们考虑一下Users表：

<script type="text/x-handlebars-template" id="temp1">
       <table>
         {{#users}} 
            <tr><td>{{name}}</td><td>{{email}}</td></tr> 
         {{/users}} 
       </table>
</script>

<script>
   var template=Handlebars.compile($("#temp1").html());    
   function renderUsersTable(users, divId){
       $("#"+divId).html(template(users:users));
   }
<script>

这样可行，但我只能使用模板脚本（text / x-handlebars-template）嵌入到我的商家页面。这不可重用：如果我需要在另一个页面上，我需要复制粘贴。我考虑将模板引用到javascript字符串变量中，但这很难看，特别是因为我的真实html非常大。

是否有更好的做法，允许将把手模板分成专用文件，根据需要包含在不同的页面中？

非常感谢

Answer 1

是。一种方法是使用gulp任务来编译所有模板。下面的示例从目录中获取所有单个手柄文件，并将它们作为模板放在一个javascript文件hb_templates.js中。每个模板都给出了它来自的文件的名称。您可以将模板放入users.handlebars。然后在生产网页中包含hb_templates.js之后生成的Handlebars.js。

gulp.task('handlebars', function() {
  gulp.src('./app/views/*.handlebars')
  .pipe(htmlmin({
    collapseWhitespace: true
  }))
  .pipe(handlebars())
  .pipe(wrap(function(data) {
    var filename = data.file.history[0].split('\\').pop().split('.')[0];
    return "Handlebars.templates." + filename + "=Handlebars.template(<%= contents %>)";
  }))
  .pipe(concat('hb_templates.js'))
  .pipe(gulp.dest('./app/scripts/'));
});

你使用这样的模板;

$("#"+divId).html(Handlebars.templates.user(users:users));

由于Handlebars中的部分只是模板，您可以在其他模板文件中使用这些模板，如此

<div>
{{> user}}
</div>

在您加载hb_templates.js之后，只需将它们注册为部分;

handlebars.registerPartial('user', handlebars.templates.user);

该示例在nodejs

的gulp中使用了以下依赖项

{
    "gulp": "3.9.0",
    "gulp-concat": "2.6.0",
    "gulp-handlebars": "4.0.0",
    "gulp-htmlmin": "1.1.3",
    "gulp-wrap": "0.11.0",
    "handlebars": "3.0.3",
}

打包基于Handlebars的小部件：javascript和html

1 个答案: