help with Views

[doubletaketech]

Anyone have an example of a basic handlebars template that loads into a view?

From the hapi view tutorial, it sounds like the compiling happens on the server. So, I'm not sure what actually still needs to be in my index.html template if I'm serving it via hapi.

I'm new to both hapi and handlebars, so forgive me if this is the wrong spot to ask.

Thanks, Don

[Marsup]

Views are for server-side rendering made by hapi, so only pure html goes out. You can also serve templates directly to the browser for him to render using the normal hapi file or directory helpers, in that case handlebars' documentation would be more appropriate, have look at their precompilation guide if you go into production.

[doubletaketech]

Thanks @Marsup . I tried it with pure HTML with just the handlebars brackets. Worked fine. Before, I was using the docs on handlebarsjs.com and it was confusing because the script required compiling client-side, etc. I couldn't get why I would need that in my template if I pass context in on the hapi server-side.

Hapi makes it even easier!

Appreciate the help. Don

[Marsup]

Client-side templates are useful for dynamic websites, but hapi's context can't be used for that :)

[doubletaketech]

You comment raised a more general question for me. What is the primary intended use case of hapi views rendered on server? Is it intended to be an alternative to "traditional" dynamic websites (the loading data into the client via ajax and then generating/binding it to the HTML on the client-side)?

What is the best practice scenario for using hapi on mobile/mobile web apps vs. doing client-side dynamic websites?

In my mobile app use case, restfully serving server-side rendered views makes a lot of sense and is very attractive. It is still "dynamic" (i.e. populating my page with JSON data on the server) but offloads work from the client. I'm beginning to see Hapi/Handlebars as not only a way to develop a REST API for data but also as a way to the serve the client via Views as well.

Am I understanding this? Or am I missing something?

Thanks, Don

[Marsup]

Handlebars runs on both sides, so that can be your strategy to do server or client side rendering depending on the device, or easier SEO. I don't know the back story of why hapi has templating in core but since it has been primarily used for Walmart's mobile backend, I guess they must have used it this way at some point. Maybe @hueniverse can answer more thoroughly about the original intent.

[doubletaketech]

Related question. Is it possible to async serve one view inside another view? My mobile app is a single page app. I render index.html view on the server. When the user click on something, I often generate a new section of the page. This section generating is done client-side right now via JQuery/Ajax. What I'd like to try is making a restful call to hapi, like /section , which renders the section on the server and sticks it into the index.html page. That section might be a big list, etc.

I see how I can use handlebars to load it client-side, but I'd still have to make the ajax call to get the data, then feed it to the template. I'm wondering if I can do the data-loading of the list on the server, then serve it as a view inside by index.html page inside a div.

Thanks, Don

[Marsup]

Same way you request data you could as well request the rendered template and insert into innerHtml.

[doubletaketech]

Great! Glad it is that easy. Thanks for helping me process this paradigm shift in my head. :)

Don

[doubletaketech]

@Marsup , Sorry to bother you again. But, I'm stuck on file structure for a node-hapi-views-handlebars-mongoose-mongo architcture. I'm hoping you might be able to provide some insight as to how you do it?

I'm trying to define a scalable file structure, but the docs for hapi, mongoose, or handlebars don't really go there. They only show snippets, but not how to optimize your files for large applications.

For views, it looks like I need the following folders:

/Public- for client-side js, css, images, etc. /Routes (so I don't have all my routes in one index.js file /Views (templates) /Views/layouts (??) /Views/partials (smaller sub templates) /Views/helpers (custom helpers) I think I get this part, except how to reference routes in separate files. And I'm not very clear on how layouts play into it.

My big question is how do I plug my data into this process? i.e. I need a query to get the data to feed to views. Do the queries go inside the /Views/helpers files? Do they stay in the Routes before reply?

Mongoose seems like a good choice for doing the queries, but they don't explain how to do the file structure either. I know I need a model somewhere and the queries somewhere. And they have to play well with my Views.

I'd basically like each one of my views/templates to have corresponding separate files for the routes and the data. That way the data can still be called in my API, independent of the view. (e.g. Customers query just returns the Customer data instead of a customer list view).

Sorry for the long comment. I just can't find any links that deal with the data-side of Views rendered on the server.

Appreciate any advice you may have. I want to get the architecture nailed down, before I start coding all my views.

Thanks, Don

[doubletaketech]

Ok. I finally figured out the mongoose structure. Models and Controllers folders and how to reference the controller in the route.

I can now see how I can just use the route to pass the context/data to the view.

I think I just need to understand how to tell the route which file in Views/helpers to use to render the view server-side (assuming I'm populating a list)? I was confused about the role of the mongoose controller and the view helper.

By doing my structure like attached, I think that will be scalable, where each component (e.g. views/templates/menu) has a corresponding file in each folder (e.g. Controllers/menu.js, etc.)

[simon-p-r]

What context is in the controllers? It seems like a lot of boilerplate code is required. I am new to hapi but like the frame project https://github.com/jedireza/frame and someone is already writing an angular front end https://github.com/Silom/ngFrame however I would like to use react for front end on my next project. What are others using to serve hapi based back-ends?

[osslate]

@simon-p-r Hello! Could you open a new issue with your question if you're still needing help?