G
G
g4ngzt42016-02-12 14:28:53
JavaScript
g4ngzt4, 2016-02-12 14:28:53

How to correctly make an object template in a list in Jade?

Hello.
I'm just starting to work with Jade, I sort of figured everything out, but due to lack of experience I can't implement the planned thing yet, I hope for help.
There is a list of objects (ads) of this kind: prntscr.com/a28x8a . I'm trying to make the layout of an object be done in a mixin. Everything seems simple, but there are several points that interest me:
1. Some objects have things that others may not have, for example: a picture, "urgent", "bargaining is possible" - prntscr.com/a290ay . You also need to show the type of object added to "Favorites": prntscr.com/a290vh . What is the best way to implement this?
Now my mixin looks like this:

mixin list-item(in_favorites, urgent, img_multiple, img, price, discount, title)
  .sr-list-item.media&attributes(attributes)
    .media-body
      .sr-list-item-img(class="#{img_multiple}")
        if img
          a(href="#")
            img(src="#{img}", alt="")
        else
          |  
      .media-body
        .sr-list-item-price= price
          if discount
            span= discount
        .sr-list-item-title
          if in_favorites
            a.sr-list-item-fav.active(href="#", title="Удалить из избранного")
          else
            a.sr-list-item-fav(href="#", title="Добавить в избранное")
          h3
            if urgent
              span.label.label-urgent срочно
            a(href="#")= title
        ul.sr-list-item-options
          li
            |Площадь: 
            span
              | Общая 50м
              sup 2
            span
              | , Жилая 38м
              sup 2
            span 
              | , Кухня 8м
              sup 2
          li 
            | Тип дома:
            span Панельный
          li
            | Этаж: 
            span 2/1
          li.sr-list-item-options-inline
            div Львов
            div 21.05.2015
            div
              a.c-link-icon(href="#")
                i.fa.fa-user
                | 
                span Александра

And I output an object with data like this:
+list-item('', 'urgent', 'sr-list-item-img_multiple', 'http://placehold.it/140x100', '500 грн.', 'Торг возможен', 'Сдам квартиру на Советской')(class="selected")

Looks rough and incomprehensible.
2. Also, I'm wondering if it's possible to insert data into the mixin as objects in an array, like this:
+list-item([{favorites: '', urgent: 'urgent'}, {multiple_images: 'sr-list-item-img_multiple'}, ... }])

To make it clear where the picture is, where the title is, where the price is, etc., because at the moment it is difficult to remember what is where. I tried to do this, but then nothing was displayed on the page, and the image url was written "object Object".
Thank you!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry Kravchenko, 2016-02-12
@mydearfriend

mixin list-item(params)
  if params.parameter
    span=params.parameter

+list-item({parameter:'yes, you can'})

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question