私はこれに比較的慣れていないので、いくつかの明白な点を見逃している場合は失礼します...
ハンドルバーを使用して再利用可能なウィジェットを作成したいと思います。簡単にするために、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がかなり大きいため、これは特に醜いです。
ハンドルバーテンプレートを専用ファイルに分割して、必要に応じて別のページに含めることができる、より良い方法はありますか？
どうもありがとう
はい。1つの方法は、gulpタスクを使用してすべてのテンプレートをコンパイルすることです。以下の例では、ディレクトリからすべての個々のハンドルバーファイルを取得し、それらを1つのjavascriptファイルhb_templates.jsにテンプレートとして配置します。各テンプレートには、元のファイルの名前が付けられています。あなたの例では、テンプレートをに入れることができますusers.handlebars。次に、生成されたhb_templates.jsafterHandlebars.jsを本番Webページに含めます。
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",
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加