Show Dynamic Set ☺️ Handlebars la

when you wanna manage most pictures in one project , this file How to easy manage.…ues Handlebars …

Barry YU

3 min readFeb 23, 2020

Set Dynamic with your project file .js.

open handlebars file “ index.handlebars “, when you wanna manage most pictures in one project , this file ……

you’ll see a lot of the same format Html ,
But just only three place differernt 👧

Open your “ index. handlebars “ form Vscode .

( See what three different object )

1 . href ( network path ) / or ID :

e.g ( href : http:// ..... or localhost:3000/barry/ ...)

2. img :

e.g ( src = 'http:// ...........javasix . img )

3. title :

e.g ( <h1 class = "barry-pictures > What name ? < /h1>

Let GO ! 👺

1. Set Handlebars of image , pictures link , title , pictures of href

Handlebars 格式看起來像是Html , 實際上並不是最後出去ＨＴＭＬ. 所以在當Server 收到請求時會渲染Handlebars 的index.handlebars檔案, 在經過處理完後才會傳送到browser .

//<---Give Object name on “ index.handlebars “--->//1.  href=”/2" ... 
                     ----------->   href ="/{{pictures.id}}"  ... 2. < src= "http://.... jpg" >
                     ----------->  < src= "{ { pictures.img } }"3. <h6 ..> hello </h6>  
                     ----------->  <h6 > pictures.title </h6>

Already denfine Neam of Object : pictures .XXX

2. Set object on app.js :

Open your app.js from VScode have see js : render ( ‘index ‘ )
and than add new object : pictures on render of paramas
Is mean app.js through [ Route ] to send data for handlebars and render

render (‘ index ‘)  
                 ===========> render ( ‘index , {pictures:barry })

Here set Object : Pictures in Render
It will give some data for handlebars throught Render of pictures

3. Set New viriable , for handlebars of what something is replace form app.js .

const barry = {
 id :  1 ,                                        // path ID 
 title : " any thing what you want say ",        // jsut title ...
 img :  "http://........ .jpg "                 //from src 
}