One of them makes sure that static files are accessible, the other one uses express-handlebars to connect the Handlebars templating mechanism to my express app. Once the /app endpoint is called, the result of the rendered index page is returned.
They help me to easily use my csn definitions in my templates.
Let's look at the index page which needs to be rendered:
Whenever you see {{ ... }}
, it means that Handlebars will inject the given expression into the resulting HTML document. We have access to all provided helper functions and input objects.
{{
and }}
symbols are text-interpolation delimiters for Vue.js. But since Handlebars uses the same symbols, I changed the Vue.js delimiters to ${
and }
.{{> list }}
and {{> object }}
just means that I want to include my defined partials, shown below.{{> list }}
(showing the table):{{> object }}
(showing the selected object):{{#each ...}}
.Finally, the Vue.js code to make the app dynamic:
The resulting app is not as pretty as the custom-made one, but good enough as a proof of concept. I'm not a frontend developer after all.
You can find the complete code in my GitHub repository.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
14 | |
11 | |
10 | |
10 | |
10 | |
9 | |
8 | |
7 | |
7 | |
6 |