6

まず、あなたの助けに感謝し、私の幼児のMeteorとBootstrapのスキルを許してください. ここで提起された質問と同様の問題があり、いくつかの提案が生成されましたが、解決策はありません。#each を使用して、Meteor テンプレートで MongoDB のデータを使用して BootStrap グリッドを設定したいと考えています。BootStrap グリッドには 12 列があり、行ごとに 4 つの「セル」を表示したいので、必要だと思います-

  1. を使用して行を作成します。
  2. ...element... 内の 4 つのデータ要素を出力します。
  3. で「row div」を閉じます。
  4. ... を使用して次の行を作成します。
  5. すすぎ、ステップ 2 から繰り返します。

ステップ 2 は、配列/コレクションからデータを返す {{#each...}} ブロックを使用して実行されます。

私の Meteor テンプレートは次のようになります (優れた「Discovering Meteor」の本から例を拡張しています) -

<template name="postsList"> 
<div class="posts">
   <div class='row-fluid' style="margin-left:1%">
      {{breakInit}}
      {{#each posts}}
         <div class="span3">
           {{> postItem}}
         </div>
         {{breakNow}}
      {{/each}}
   </div>
</div> 
</template>

ヘルパーの JavaScript は次のようになります。

Template.postsList.breakInit = function() {
Template.postsList.docCount = 0 ;
};

Template.postsList.breakNow = function() {
count=Template.postsList.docCount + 1 ;
result="";
if ( count == 4 ) {
    count = 0 ;
    Template.postsList.docCount = count ;
    result="</div><div class=row>" ;
};
Template.postsList.docCount = count ;
return new Handlebars.SafeString(result);
};

これは、少なくとも #each によって出力された要素をカウントし、 を返して</div><div class=row>新しい行を開始し、カウンターをリセットするという点では、すべて機能しているように見えます...ただし、返された HTML は現在の行を終了して次の行を開始します私が期待するように、Bootstrap（またはMeteorまたは私のブラウザ）によって処理されないようです。として再注文されたよう<div class=row></div>です。FireFox の Inspector のこのスクリーン キャップを参照してください (コードは 6 つの要素を出力し、最初の行に 4 つ、2 番目の行に 2 つ) -

<div id="main" class="row-fluid">
  <div class="posts">
    <div class="row">
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="row"> … </div>  <-- The problem...
      <div class="span3"> … </div>
      <div class="span3"> … </div>
    </div>
  </div>
</div>

<div class=row>...</div>スパンの真ん中にあることに注意してください。正しく見えません。前の「行」DIV を閉じて、次の DIV を開始する必要があります。私のコードの修正または Meteor で動的データを使用してグリッドに入力するための代替方法を誰かが提案できますか?

4

3 に答える 3

2

問題は、無効な HTML ( </div><div class=row>) を追加しようとすることにあります。DocumentFragment としても有効ではありません (一般に、Document と DocumentFragment の違いは、Document は単一のドキュメント要素 (<html>たとえば、ルート ノードなど) しか持てないのに対し、DocumentFragment は複数のドキュメント要素を持つことができるということです)。

そのため、Spark が文字列を処理して DOM に詰め込もうとすると、自動的に修正されます。これも Spark の制御範囲を超えており、ブラウザー DOM がそれを行います。

あなたがする必要があるのは、別の each 内にネストされた each を実行することです。1 つ目は行を反復処理し、2 つ目はその行の列を反復処理します。

いくつかの擬似コード:

{{#each rows}}
    <div class="row-fluid">
        {{#each posts row}}
            <div class="span3">
                {{> postItem}}
            </div>
        {{/each}}
    </div>
{{/each}}

Template.postsList.rows = function () {
    // 1. Get cursor of posts (cursor = posts.find({...});
    // 2. Get count from cursor (count = cursor.count());
    // 3. Divide count by desired columns per row, then Math.ceil it (I think!)
    // 4. Return an array of objects each containing a "row" key, with some various values (current row probably, count, etc)
};

Template.postsList.posts = function (row) {
    // Return a cursor of posts that is offset and limited (see meteor docs) based on values found in the row object
};

それがあなたを動かすのに十分であることを願っています。

EDIT : ステップ 3 (行ごとに目的の列でカウントを分割) では、代わりにこの数値をテンプレートから取得する可能性があるため、コードとテンプレートの間でこれらの詳細を混在させません。例: {{#each rows 4}}.

于 2013-09-17T12:30:11.640 に答える
1

それほど複雑ではないソリューションは、単純に Foundation Grid System の適応を使用することです

https://github.com/JohnnyTheTank/bootstrap-block-grid

列数を一度定義すると、すべての要素がそのルールとレイアウトに動的に追従するという、より優れたアプローチに従います。

<div class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4">
    <div>
        Content 1
    </div>
    <div>
        Content 2
    </div>
    <div>
        Content 3
    </div>
    <div>
        Content 4
    </div>
    <div>
        Content 5
    </div>
    <div>
        Content 6
    </div>
</div>
于 2016-08-30T22:02:26.243 に答える