Build an "SPA" with HTMX #2 - Showing Initial Data

Key Takeaways

okay then so in this lesson we're going to inject some initial data into the index template so we can show some actual content for that data and I want to let you know before we start this lesson that the actual htx content in this video is pretty much none we might mention it a little bit and how it's going to work in the future but for now we're going to focus on just making an index view or fleshing out the index view which lists out a bunch of data and that doesn't really need any htx but then in the next lesson we'll be adding some htx to The View anyway the data we're going to be using is just some dummy data that we can output in a grid of cards on the page and that data lives inside this data folder in the articles. JS file and you can see this just includes an export and a rate of three article objects each with an ID property a title and a body so then we want to make this articles array available within the index view so that we can see it and to make data available in a view POG we should pass it into the view as a property on the object when we say which view we want to render so in the routes file we can already see that we pass a title property through and this is how we can pass values into views right as properties on an object as the second argument to this render method and those properties are then accessible in whatever view we pass them into in this case it's the index View and also any partial views nested within the index or any views the index extends like the layout view so anyway we already pass a title in and that actually gets used in the layout view but now we also want to pass through an articles property so let's make that property first of all and then we also need to import the Articles data from the Articles file at the top of this rout file so that we can pass that value into the view so let's do that by saying import articles and it comes from. SL to come out of this folder then into Data and then SL articles. JS and once that's done we can then pass those articles as a value to the Articles property in this object meaning that now we should be able to use this articles value inside the index view so let's head to that index View and use those articles and in this articles view I want to make a new div beneath the H2 with the class of article list to do that we can just say div. article hyen list and actually we don't even need the div part we can leave that off because pug uses divs as the default tag when one isn't specified so if we just say do article hyphen list then this will render a div with a class of article hyen list now actually I want to make a new partial View for the list of articles for two reasons one because it makes that partial view reusable if we want to use it elsewhere later which I think we will and two because it keeps this view this index view cleaner so let's first make a new folder inside the views folder called partials for any partial views and inside that folder we'll make a new file called list. pug since this is going to be a list of articles in here you can call it what you want though all right then so before we flesh this view out I want to make sure that we Nest or include this view inside the index one so let's go back to that view and beneath the article list div tab wants to say we're nesting something in this div and then say include followed by a path to the view we want to include so partials to go into the partials folder then slash list right then so now back in the list view we still get access to the article's property because this view is nested within the index view which we passed the Articles into so what do we want to do with the Articles data inside this file then well remember the Articles data is an array and we want to Output a bit of template for each item in the array so we want to somehow Loop through these output a bit of template for each one the way we do that in pug is by saying each article in articles so articles is the data we have and we refer to each one as an article you can call it XY Z if you wanted to but I'm calling it article and then again we have to indent and we can output the template here and what pug will do is cycle through the Articles and for each one output this bit of template so let's say div right here and we'll give each one a class of article and and then below that div remember we don't actually need to write the div we can just say do article and it will still be a div but then within that div we want to Output three things a title of the article then some kind of body snippet so a short section of the body and then also a button at the bottom that says view more details or something like that so let's do an H3 first and then to output something Dynamic we use a pound sign or hash and then curly braces and then we can access the variable so article in in this case this thing right here and then dots and then whatever property we want now it's the name property if we take a look at this we have name and body all right so we output the name below that we'll do a P tag for the article body so again hash and then curly braces article body and I don't want to Output the entire body because that would be a huge paragraph instead we'll slice a small section of that so we'll say do slice and then we'll go from position zero to 100 characters so we're just getting the first 100 characters here and outputting those and then after those 100 characters we'll do dot dot dot to say there's more all right and then finally a. BTN um let's do that correctly BTN and we'll say view details for the text of that link all right and by the way we have already created styles for these classes right here so everything's going to look okay in the browser Okay cool so that is the list view sorted all right cool so now we can see all those articles on on the homepage and everything seems to be working so in the next lesson we'll set up these buttons to navigate to a details view for each article using HDMX to basically swap out content on the screen and update the URL in the address bar