[解決済み] handlebars.jsのテンプレートを使って、配列の最後のアイテムに条件を付ける
2023-07-12 19:52:46
質問
私はテンプレートエンジンのためにhandlebars.jsを活用しており、条件付きのセグメントがテンプレート構成オブジェクトに含まれる配列の最後の項目である場合にのみ表示するようにしたいと思っています。
{
columns: [{<obj>},{<obj>},{<obj>},{<obj>},{<obj>}]
}
私はすでに、いくつかの等号/大文字/小文字の比較を行うヘルパーを引っ張ってきて、この方法で最初のアイテムを特定することに成功しましたが、ターゲット配列の長さにアクセスすることに運がなかったのです。
Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {...})
"{{#each_with_index columns}}"+
"<div class='{{#equal index 0}} first{{/equal}}{{#equal index ../columns.length()}} last{{/equal}}'>"+
"</div>"+
"{{/each_with_index}}"
どなたか、近道、異なるアプローチ、および、最良のコースを決定するためにhandlebars.jsエンジンに侵入する必要がないようなhandlebarsの良さをご存知でしょうか?
どのように解決するのですか?
Handlebars v1.1.0より、以下のように
@first
と@last
のブーリアン演算をこの問題の各ヘルパーで行います。
{{#each foo}}
<div class='{{#if @first}}first{{/if}}
{{#if @last}} last{{/if}}'>
{{@key}} - {{@index}}
</div>
{{/each}}
私が書いた手軽なヘルパーは
Handlebars.registerHelper("foreach",function(arr,options) {
if(options.inverse && !arr.length)
return options.inverse(this);
return arr.map(function(item,index) {
item.$index = index;
item.$first = index === 0;
item.$last = index === arr.length-1;
return options.fn(item);
}).join('');
});
では、書けます。
{{#foreach foo}}
<div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>
{{/foreach}}
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み] 配列の反復処理に "for...in "を使用するのは、なぜ良くないのでしょうか?
-
[解決済み] 配列の最後の項目を取得する
-
[解決済み] 配列から最後の項目を削除する
-
[解決済み] handlebars.js {{#if}}の条件における論理演算子
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] moment.jsでミュータビリティを回避するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
-
[解決済み] Mustacheのテンプレートで、末尾のカンマなしでカンマ区切りリストを表現するエレガントな方法はありますか?