Come eseguire il rendering di una griglia (Twitter Bootstrap) utilizzando Ember.js e Handlebars.js?

Question

Sto avendo difficoltà a capire un modo per rendere il seguente markup usando 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> 

con puro JavaScript, avrei fatto qualcosa di simile:

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

Idealmente , Lo metterei in un helper Handlebars personalizzato (rimuovendo così la logica dal modello) ma Ember documentation spiega solo come scrivere semplici helper e non so davvero come scrivere un block helper più complesso senza perdere i binding di proprietà.

Qualcuno conosce il modo migliore per utilizzare il sistema di griglia di Twitter Bootstrap con una raccolta di modelli di Ember?

Grazie in anticipo! Con i migliori saluti,

David

Answer 1

Per chi fosse interessato, ecco un modo abbastanza pulito per gestire questo scenario.

Ecco il modello:

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

e il corrispondente regolatore:

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

Questo può anche essere utile per generare tabelle (con <td> annidato in <tr>) ... Anche se ho finito per usare la soluzione di kiwiupover! ;-)

Saluti,

D.

Answer 2

Buongiorno Dave

Invece di useing righe e div per fare una griglia di blocco provare a utilizzare un "lista non ordinata"

Il codice 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> 

Quindi il CSS sarebbe simile a questo.

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

Poi, se si voleva cambiare a quattro blocchi è possibile possibile cambiare il css per:

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 una soluzione più robusta.

È anche possibile controllare questa app di brace Open-pos i prodotti sono layout utilizzando questo metodo.

La "fondazione" del framework css di Zurb come grande soluzione denominata block-grid. In questo sistema è super facile cambiare l'altro numero della griglia 3 con un piccolo cambiamento nel css. è possibile inserire lo block grid code nel file scst di bootstrap. Se avete domande fatemi sapere.

Acclamazioni

Answer 3

La risposta accettata funziona bene, ma se si dispone di posts dinamico, le righe e le estensioni verranno ridisegnate in qualsiasi momento le modifiche al modello/proprietà posts. Questo potrebbe essere OK, se il contenuto è piccolo, ma nel mio caso ho un grafico per ogni blocco ed è prontamente evidente quando vengono tutti ridisegnati allo stesso tempo.

Nel mio caso, ho deciso di sovrascrivere il cst di bootstrap; tuttavia, si desidera tenere conto delle varie dimensioni dello schermo tramite ulteriori query multimediali.

Ecco le regole per indirizzare la più grande rete e garantire che non vi sono 3 span4 s (si noti che questo era BS 2.3.2) correttamente allineate su ogni "riga", ma all'interno di un unico 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; 
    }