Tạo Bookshelf app với Lotus Framework (Phần 2)
lotusrb
11
Ruby
114
White

My Mai viết ngày 26/11/2015

Phần 1 mình đã giới thiệu sơ lược về cách khởi động Bookshelf app với Lotus. Bài lần này sẽ tiếp tục với Layout cho Bookshelf nha

alt text

Dựa vào layout bên trên, có thể thấy là có 8 quyển sách được tạo ra, theo nguyên tắc cấu trúc HTML của 8 quyển sách là như nhau. Nó chỉ khác về nội dung.
vì vậy HTML template cho sách sẽ là một template sử dụng chung cho tất cả.

Template để hiển thị sách:

<div class="row">
        <!-- Book 1 -->
        <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://it-ebooks.org/img/books/wrox/professional_php6.jpg" alt="lotus bookshelf">
          </a>
        </div>
        <!-- End book 1 -->

        <!-- Book 2 -->
        <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://it-ebooks.org/img/books/wrox/professional_php7.jpg" alt="lotus bookshelf">
          </a>
        </div>
        <!-- End book 2 -->
        .
        .   
        .
  </div>

Đó, các bạn đã thấy được template để hiển thị 1 quyển sách là:

<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://it-ebooks.org/img/books/wrox/professional_php6.jpg" alt="lotus bookshelf">
    </a>
</div>

Ta cũng thấy được image_urlthay đổi phụ thuộc vào mỗi quyển sách khác nhau. Vì vậy chúng ta cần phải bind data từ books collection cho attribute image_url

Render sách với data

Chúng ta 1 books collection gồm 8 quyển sách.

  books = [
    {
      image_url: 'http://it-ebooks.org/img/books/wrox/professional_php6.jpg',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    },
    {
      image_url: 'http://it-ebooks.org/img/books/wrox/professional_php7.jpg',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    },
    .
    .
    .
]

Làm cách nào để hiển thị 8 quyển sách này?

Lotus view hỗ trợ tất cả các method của Ruby nên cách để render books collection cũng khá là đơn giản

  • Để có được data của một quyển sách trong books collection chúng ta phải cho nó qua vòng lặp each.
  • Get data cho image_url
<% books.each do |book|%>
  <div class="col-sm-6 col-md-3">
  <a href="#" class="thumbnail">
    <img src="<%= book.image_url %>" alt="lotus bookshelf">
  </a>
  </div>
<% end %>

Làm thế nào để có được books collection ??? Bài viết tiếp theo mình sẽ giới thiệu tiếp.

Kết luận

Để tránh việc làm các bạn rối nên mình sẽ chia bài viết thành từng phần nhỏ và chỉ ra một cách cụ thể hơn.
Bài viết tiếp theo mình sẽ viết cụ thể về cách tạo data, và cách get data

Các bạn có thể xem code tại đây: https://github.com/mymai91/bookshelf/tree/create-template

Hy vọng qua bài này có thể chia sẽ được với các bạn rõ hơn về Lotus

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

33 bài viết.
177 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết 3 năm trước
21 8
White
19 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết 3 năm trước
19 21
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết gần 2 năm trước
19 9
Bài viết liên quan
White
4 2
__Chú thích__: Đây là bản dịch tiếng Việt của bài viết gốc của tôi. Nếu bạn muốn xem bản tiếng Anh, xin hãy trỏ tới URL (Link) Lời mở (Link) là ...
Lơi Rệ viết hơn 3 năm trước
4 2
White
8 1
Tiếp tục bài viết lần trước về (Link) & (Link) bây giờ chúng ta sẽ tìm hiểu thêm cách tạo API từ Lotus Framework. Tại sao lại sử dụng Lotus để tạ...
My Mai viết 3 năm trước
8 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
33 bài viết.
177 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!