Jak renderować siatkę (Twitter Bootstrap) za pomocą Ember.js i Handlebars.js?

Question

Mam hard time figurującego sposób renderowania następujące znaczników za pomocą 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> 

użyciu czystego JavaScript, bym zrobił coś takiego:

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>'; 

Idealnie , Umieściłbym to w niestandardowym pomocniku Handlebars (usuwając w ten sposób logikę z szablonu), ale tylko wyjaśnia, w jaki sposób pisać prostych pomocników i naprawdę nie wiem, jak napisać bardziej złożony blokowy helper bez utraty powiązań właściwości.

Czy ktoś wie, jak najlepiej wykorzystać system gridowy Bootstrap z kolekcją modeli Ember?

Z góry dziękuję! Z poważaniem,

David

Answer 1

Dla zainteresowanych tu jest całkiem czysty sposób obsługiwać ten scenariusz.

Oto szablon:

{{#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}} 

i odpowiadający mu kontroler:

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') 
}); 

ten może być również przydatna do generowania tabel (z <td> zagnieżdżony w <tr>) ... Mimo że skończyło się używając rozwiązanie kiwiupover! ;-)

Chodzi,

D.

Answer 2

G'day Dave

Zamiast useing wierszy i div, aby siatka blok spróbuj użyć "nieuporządkowaną listę"

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> 

Następnie CSS wyglądałby tak.

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; 
} 

Następnie, jeśli chcesz zmienić na cztery bloki można można zmienić 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 example bardziej niezawodne rozwiązanie.

Możesz również sprawdzić tę aplikację ember Open-pos produkty są układane za pomocą tej metody.

Zbudowany przez Zurb css framework "foundation" jako świetne rozwiązanie o nazwie block-grid. W tym systemie bardzo łatwo jest zmienić inny numer o 3 w górę z niewielką zmianą w css. możesz wpaść do block grid code do swojego bootstrap-a. Jeśli masz jakieś pytania, daj mi znać.

Cheers

Answer 3

Przyjęta odpowiedź działa dobrze, ale jeśli masz posts, które są dynamiczne, wiersze i zakresy zostaną ponownie narysowane za każdym razem, gdy zmieni się model/własność posts. Może to być w porządku, jeśli zawartość jest mała, ale w moim przypadku mam wykres dla każdego bloku i jest to oczywiste, gdy wszystkie są przerysowane w tym samym czasie.

W moim przypadku zdecydowałem się przesłonić bootstrap css; należy jednak uwzględnić różne rozmiary ekranu za pomocą dodatkowych zapytań o media.

Oto zasady kierowania największą siatkę i upewnić się, że istnieją 3 span4 s (uwaga ta była BS 2.3.2) prawidłowo wyrównane na każdego „rzędu”, ale w środku pojedynczy 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; 
    }