Làm cách nào để hiển thị lưới (Twitter Bootstrap) bằng Ember.js và Handlebars.js?

Question

Tôi đang gặp một thời gian khó khăn để tìm một cách để làm cho đánh dấu sau sử dụng 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> 

Sử dụng tinh khiết JavaScript, tôi đã làm một cái gì đó như thế này:

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

Lý tưởng nhất Tôi sẽ đặt điều này trong một trình trợ giúp Handlebars tùy chỉnh (do đó loại bỏ logic khỏi khuôn mẫu) nhưng Ember documentation chỉ giải thích cách viết các trình trợ giúp đơn giản và tôi thực sự không biết cách viết một trình trợ giúp khối phức tạp hơn mà không làm mất các ràng buộc thuộc tính.

Có ai biết cách tốt nhất để sử dụng hệ thống lưới điện của Twitter Bootstrap với một tập hợp các mô hình Ember không?

Cảm ơn bạn trước! Trân trọng,

David

Answer 1

Đối với những người quan tâm, đây là một cách khá sạch để xử lý tình huống này.

Dưới đây là các mẫu:

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

Và bộ điều khiển tương ứng:

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

này cũng có thể hữu ích để tạo ra bảng (với <td> lồng trong <tr>) ... Mặc dù tôi đã kết thúc bằng giải pháp của kiwiupover! ;-)

Kính trọng,

D.

Answer 2

G'day Dave

Thay vì useing hàng và div để tạo ra một lưới khối hãy thử sử dụng một "danh sách không có thứ tự"

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> 

Sau đó, CSS sẽ trông như thế này.

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

Sau đó, nếu bạn muốn thay đổi tới bốn khối bạn có thể có thể thay đổi 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 một giải pháp mạnh mẽ hơn.

Bạn cũng có thể xem ứng dụng ember này Open-pos sản phẩm là bố cục bằng cách sử dụng phương pháp này.

Khuôn khổ css "nền móng" của Zurb là giải pháp tuyệt vời được gọi là block-grid. Điều này có hệ thống đó là siêu dễ dàng để thay đổi 3 lên lưới số khác chỉ với một thay đổi nhỏ trong css. bạn có thể thả trong block grid code vào scss bootstrap của bạn. Nếu bạn có bất kỳ câu hỏi cho tôi biết.

Cheers

Answer 3

Câu trả lời được chấp nhận hoạt động tốt, nhưng nếu bạn có posts thì các hàng và nhịp động sẽ được vẽ lại bất kỳ lúc nào các thay đổi về mô hình/thuộc tính posts. Điều này có thể được, nếu nội dung là nhỏ, nhưng trong trường hợp của tôi, tôi có một biểu đồ cho mỗi khối và nó dễ dàng rõ ràng khi tất cả chúng được vẽ lại cùng một lúc.

Trong trường hợp của tôi, tôi quyết định ghi đè lên css bootstrap; tuy nhiên, bạn sẽ muốn tính đến các kích thước màn hình khác nhau thông qua các truy vấn phương tiện bổ sung.

Dưới đây là các quy tắc để nhắm mục tiêu lưới lớn nhất và đảm bảo rằng có 3 span4 s (lưu ý đây là BS 2.3.2) thẳng hàng một cách chính xác trên mỗi "hàng", nhưng bên trong một đơn 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; 
    }