私は、ループすることができるオブジェクトの配列を返すヘルパーを作成しようとしています。以下のようにそれを使用してHandlebarsヘルパーからオブジェクトの配列を返します
Handlebars.registerHelper('testHelper',() => {
return [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
});
：ここで私は今持っているものだ
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
そして、私の代わりに、個々の値の配列内の各オブジェクトに対して[object, Object]を受けています。助けてください:)
ありがとう！
ハンドルバーの作業でのヘルパーはややこしいです。ヘルパーからメインテンプレート本体にデータを渡す代わりに、ヘルパーに関連するテンプレート本体の部分をヘルパーに渡します。
を適用する 1）現在のコンテキスト（この） 2）いくつかのテンプレートロジック：したがって、たとえば、あなたがこれを行うとき：
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
をあなたはentriesヘルパーに二つのことを提供していますあなたがやりたいし、そう
Handlebars.registerHelper('entries', (data, options) => {
// data is whatever was provided as a parameter from caller
// options is an object provided by handlebars that includes a function 'fn'
// that we can invoke to apply the template enclosed between
// #entries and /entries from the main template
:
:
});
：ここ
は、ヘルパーはこれらの項目を取得する方法を説明します
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
opt.fn(item)は、テンプレートのこの部分適用されます。
<a href="/{{slug}}">{{title}}</a>
をし、アイデアが策定されて返された文字列の中に入れ、その後された文字列（あなたのhtmlの部分）を作成することですあなたのメインテンプレートによって。
次は、この動作を示すサンプルです。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t({}));
</script>
</body>
</html>私も他の人はあなたを教えしようとしているものをエコーしてみましょう。テンプレート内にデータを挿入しようとするのは大して意味がありません。これは、テンプレートが動作するためのコンテキストとして渡す必要があります。それ以外の場合は、ビジネスロジックとテンプレートロジック（ビュー）を混在させるため、不必要なことが複雑になります。
ここにあなたのテンプレートにデータを渡し、あなたが同じスニペットで作ることができる簡単な変更です：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var t = Handlebars.compile($('#t').html());
$('body').append(t(data));
</script>
</body>
</html>あなたのJavaScriptで、あなたのデータを取得し、テンプレートを維持することができます。この方法では、彼らが意図していたもの - htmlの策定 -
ヘルパーの目的は、データを返すのではなく、マークアップの文字列を返すことです。なぜヘルパーにデータを保存させたいのですか？ – 76484
@ 76484私がコンパイルするデータの量を減らすために、サーバー側のコンパイルを高速化するために、必要なデータのみを使用できるようにしたいと考えています。 – jasonetco
データをコンパイルしません。テンプレートをコンパイルします。 – 76484