The template would almost certainly be an “include” of some kind. That just signifies how you would likely break up your own code in a real project.
#Fleex handllelbars movie#
We also take the template in this video and movie it to a different Pen. The HTML will be returned, and we append it to the page. Then within our for loop, we call our new templating function with the object (the context) that contains a single movie. Handlebars is named handlebars, presumably, because the those placeholder bits are wrapped in curly braces that look a bit like handlebars from above.įollowing the simple tutorial on the Handlebars website, we create our templating function like this: var source = $("#movie-template").html()
We ultimately pass an object to the templating function that gets created, and the properties of that object match these placeholder bits. Ultimately Handlebars just yanks out the guts of this tag and turns it into a template function. That prevents the contents of that tag from executing. Note the weird type attribute on the script tag. Our template ultimately looked like this: It makes for nice authoring because we can get away from the clumsiness of string concatenation (all those quotes and plusses) and get the nice syntax highlighting for HTML your editor provides. Handlebars has a clever approach in that the HTML for the template is literally put in the HTML. Take #1 on our templating adventure is with Handlebars. In this video we’re going to start breaking those things up to get us on our way to more organized, maintainable, and understandable code. All in one block of JavaScript we were mixing data retrieval, display and business logic, and templating. We left off in the last video with a bit of a tangled mess.
0 kommentar(er)
