ch5.7~ conditionals, iteration, mixins

1. Conditionals

1. 한가지 값만 가지는 variable
   • h1=pageTitle   << variable
   • == h1 #{pageTitle}  >> but,  다른 textㄷ와 섞어쓰지않고있으므로 위쪽처럼함
2. if else if
   1. videoController에 fakeUser 생성,
   2. user 객체상태 따라 화면다르게

const fakeUser = {
  username: "Nicolas",
  loggedIn: true,
};

export const trending = (req, res) =>
  res.render("home", { pageTitle: "Home", fakeUser });
  
  =====================
      body 
        header 
            if fakeUser.loggedIn
                small Hello #{fakeUser.username}
            nav     
                ul 
                    if fakeUser.loggedIn
                        li 
                            a(href="/logout") Log out
                    else
                        li 
                            a(href="/login") Login

2. Iteration : list보여줌

• array거나 객체거나
• each in else

export const trending = (req, res) => {
  const videos = [
    {
      title: "Hello",
    },
    {
      title: "Video #2",
    },
    {
      title: "WhatUp",
    },
  ];
  return res.render("home", { pageTitle: "Home", videos });
};
====================
    ul
        each video in videos    
            li=video.title
        else 
            li Sorry nothing found.

 

3. Mixins

: 데이터를 받을 수 있는 partial

• 기존에 만든 형태

// home.pug

block content  
    h2 Welcome here you will see the trending videos    
    each video in videos    
        div
            h4 video.title
            ul
                li  #{video.rating}/5
                li #{video.comments} comments.
                li Posted #{video.createdAt}.
                li #{video.views} views.

• mixin 적용하기

mixin video(info)
    div
        h4=info.title
        ul
            li  #{info.rating}/5
            li #{info.comments} comments.
            li Posted #{info.createdAt}.
            li #{info.views} views.
=======================================
include mixins/video

each potato in videos    
        +video(potato)