1

Meteor を使用して、Handlebars @index の欠如を回避しようとしています。私は近づいています。カウンターといくつかのヘルパー関数を実装しました。

  • initCounterカウンターを0に初期化します
  • incCounterModカウンターをインクリメントし、モジュロを適用してすべての X 数値を取得します
  • counterIsカウンターが特定の数値 X であることを確認するだけです

これは基本的に、出力で行ごとに 3 つの項目を取得するためのものです。以下にサンプルを示します。

  {{initCounter}}
  <div class="row-fluid">
  {{#each list}}
    <span></span>
    {{incCounterMod 3}}
    {{#if counterIs 0}}
      </div><div class="row-fluid">
    {{/if}}
  {{/each}}
  </div>

ご覧のとおり、私は 1 つを終了し<div>、別のものを開始しようとしています。次のような出力が得られるはずです。

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
...

問題は...ハンドルバーまたはMeteorは、タグdivを逆にすることでブロックを「修正」または「論理的に一致」しているように見えるため、出力は次のようになります。</div><div class="row-fluid">

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  ...
</div>

私はそれを求めていないので、ちょっとばかげています。<div>ソースコードのどこに表示されるかに従ってそれらを一致させるのではなく、1つを終了して別のものを開始しようとしています。(注: コンソールのデバッグは、すべてのカウンターや機能が正常に機能していることを示しています。)

これを回避する方法はありますか？Handlebars はそのまま html テキストをレンダリングしただけだと思っていました...私は間違っているかもしれません。

ありがとう。

4

1 に答える 1

0

ページ上により多くの項目を配置するために 3 つの列を使用することが目的である場合は、div行ごとに実際には必要ない可能性があり、CSS ベースのアプローチを検討することをお勧めします。 以下は、データをli要素として出力する方法の例です。CSS はコンテナとそれぞれの幅を設定し、li必要な数の列にデータを流し込みます。このアプローチの利点の 1 つは、ディスプレイをレスポンシブにできることです (おそらく、電話やサイドバーに表示する場合は 1 列だけ、印刷物では 8 列だけが必要です)。これにより、非常に単純なテンプレートが残ります。

<ol>
  {{#each list}}
    <li>{{value}}</li>
  {/each}
</ol>

何らかの理由でそれぞれdiv3 つspanの を使い続けたい場合、Handlebar の一般的なアプローチは、一度に 3 つを出力するようにテンプレート ヘルパーでデータを構造化することです (例: list = [[1,2,3], [4,5,6], [7,8,9]])。サンプル構造は、ネストされた{{#each}}ブロックを使用して次のコードでレンダリングできます。

{{#each list}}
  <div>
    {{#each this}}
      <span>{{this}}</span>
    {{/each}}
  </div>
{{/each}}

興味深いのは、Handlebars がコードを「修正」するほど使用方法について意見が分かれていることですが、ほとんどの場合、うまく機能します。上記の html は読みやすく、トラブルシューティングも簡単です。ただし、ヘルパー JavaScript がより複雑になります。

于 2013-07-13T01:51:16.800 に答える