5

Ember.Handlebars を使用して次のマークアップをレンダリングする方法を理解するのに苦労しています。

<div class="row-fluid">
  <div class="span4">Item #1 (row #1 / column #1)</div>
  <div class="span4">Item #2 (row #1 / column #2)</div>
  <div class="span4">Item #3 (row #1 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #4 (row #2 / column #1)</div>
  <div class="span4">Item #5 (row #2 / column #2)</div>
  <div class="span4">Item #6 (row #2 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #7 (row #3 / column #1)</div>
</div>

純粋な JavaScript を使用すると、次のようになります。

var array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    output = '<div class="row-fluid">';

for (var i = 0, j = array.length; i < j; i++) {
  output += '<div class="span4">' + i + '</div>';

  if ((i + 1) % 3 == 0) {
    output += '</div><div class="row-fluid">';
  }
}

output += '</div>';

理想的には、これをカスタムの Handlebars ヘルパーに配置します (したがって、テンプレートからロジックを削除します) が、Ember のドキュメントでは単純なヘルパーの記述方法しか説明されておらず、プロパティを失うことなく、より複雑なブロック ヘルパーを記述する方法が本当にわかりません。バインディング。

Ember モデルのコレクションで Twitter Bootstrap のグリッド システムを使用する最良の方法を知っている人はいますか?

前もって感謝します！よろしくお願いします、

デビッド

4

3 に答える 3

4

G'dayデイブ

行と div を使用してブロック グリッドを作成する代わりに、「順序付けられていないリスト」を使用してみてください

HTML

<ul class="row-fluid block-grid-3">
  <li>Item #1 (row #1 / column #1)</li>
  <li>Item #2 (row #1 / column #2)</li>
  <li>Item #3 (row #1 / column #3)</li>
  <li>Item #4 (row #2 / column #1)</li>
  <li>Item #5 (row #2 / column #2)</li>
  <li>Item #6 (row #2 / column #3)</li>
  <li>Item #7 (row #3 / column #1)</li>
</ul>

そうすると、CSS は次のようになります。

ul.block-grid-3 {
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li {
   width: 33.33333%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li:nth-of-type(3n+1) {
   clear: left;
}

次に、4 つのブロックに変更したい場合は、css を次のように変更できます。

ul.block-grid-4 > li {
   width: 25%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}  
ul.block-grid-4 > li:nth-of-type(4n+1) {
   clear: left;
}

jsfiddle の例は、より堅牢なソリューションです。

また、この ember アプリOpen-posをチェックして、この方法を使用して製品をレイアウトすることもできます。

block-gridと呼ばれる優れたソリューションとしての Zurb の CSS フレームワーク「基礎」。このシステムでは、css を少し変更するだけで、3 つ上のグリッドの他の番号を簡単に変更できます。ブロック グリッド コードをブートストラップ scss にドロップできます。ご不明な点がございましたら、お知らせください。

乾杯

于 2013-04-22T21:42:10.410 に答える
2

興味のある方のために、このシナリオを処理するかなりクリーンな方法を次に示します。

テンプレートは次のとおりです。

{{#each post in posts}}
  {{#if post.first}}
    <div class="row-fluid">
  {{/if}}
    <div class="span4">
      <div class="post">
        {{post.title}}
      </div>
    </div>
  {{#if post.lastOfRow}}
    </div>
    <div class="row-fluid">
  {{/if}}
  {{#if post.last}}
    </div>
  {{/if}}
{{/each}}

そして対応するコントローラー:

App.PostsController = Ember.ArrayController.extend({
  posts: function () {
    var length = this.get('length');

    return this.map(function (post, i) {
      // Checks if it’s the last post
      if ((i + 1) == length) {
        post.last = true;
      } else {
        post.last = false;

        // Checks if it’s the first post
        if (i == 0) {
          post.first = true;
        } else {
          post.first = false;
        }

        // Checks if it’s the last post of a row
        if ((i + 1) % 3 == 0) {
          post.lastOfRow = true;
        } else {
          post.lastOfRow = false;
        }
      }

      return post;
    });
  }.property('content.@each')
});

<td>これは、(ネストされた)テーブルを生成するのにも役立つ場合があります<tr>... kiwiupover のソリューションを使用することになったにもかかわらず! ;-)

よろしく、

D.

于 2013-04-25T11:31:08.663 に答える
0

受け入れられた答えはうまく機能しますが、それが動的である場合、モデル/プロパティが変更postsされるたびに行とスパンが再描画されます。postsコンテンツが小さい場合はこれで問題ないかもしれませんが、私の場合はブロックごとにグラフがあり、すべてが同時に再描画されるとすぐにわかります。

私の場合、ブートストラップ css をオーバーライドすることにしました。ただし、追加のメディア クエリを使用して、さまざまな画面サイズを考慮する必要があります。

最大のグリッドを対象とし、3 つspan4の s (これは BS 2.3.2 であることに注意してください) が各「行」に正しく配置されていることを確認するためのルールを次に示しますrow-fluid。

  .row-fluid [class*="span4"]:nth-of-type(3n+1) {
    margin-left: 0;
  }
  .row-fluid [class*="span4"]:nth-of-type(n+4) {
    margin-top: 10px;
  }
于 2014-03-20T03:58:21.653 に答える