11/23공부

iteration & mixin 

 

iteration :array 요소들 elements에 특정 행동을 취할 때 

each x in y(array) y의 이름 videoController상 이름과 같아야함 

 

mixin : 데이터를 포함한 partial, 다른 데이터를 포함한 같은 형태 html을 보여줌

미리만들어놓은 html 블럭에 밖에서 데이터 정보를 가져옴

include mixins/video

each x in y(array) 

+video( x ) <- (여기로 데이터 보내야함)

 

다음과같은 배열이 존재함 

export const trending = (req, res) => {
  const videos = [
    {
      title: "Hello",
      title: "First Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Video #2",
      title: "Second Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
    {
      title: "Whatsup",
      title: "Third Video",
      rating: 5,
      comments: 2,
      createdAt: "2 minutes ago",
      views: 59,
      id: 1,
    },
  ];
  return res.render("home", { pageTitle: "Home", videos });

 

extends base

include mixins/video  //mixin이 include되어 있지 않으면 undefined의 length를 찾을 수 없다는 에러가 나옴

 

each potato in videos   // controller로 보낸 videos 배열(array)의 객체(item) potato에 

  +video(potato) //video라는이름을 가진 mixin의 potato 정보를 이용해 배열중 객체

 

 

mixin 파일 

mixin video(info)

    div 

        h4= info.title

        ul

              li  #{info.rating}/5

              li  #{info.comments} comments.

              li  posted #{info.createdAt}