Learning Meteor.js [Part 8]: Refactor views to make use of templates

Now that we have deployment out of the way let's return to the application. Since there will eventually be several pages, I decided to refactor the views to make that easier going forward.

The meteor guide recommends dividing the UI of the application into 3 areas:

• Layouts: Similar in concept to master pages in ASP.NET.
• Pages: Similar in concept to a content page in ASP.NET (it provides content for several place holders within the layout).
• Components: Similar in concept to a partial or user control in ASP.NET.

With this in mind I refactored the structure like this:

Things to note:

1. Each mark up page (.html) has a 'code behind' file (.js). This javascript file acts as the root of the view, by that I mean that it is the one that imports its corresponding html file.
2. I prefer to name each piece with a 'Layout', 'Page', 'Part' suffix to make it clear what is its role in the application.
3. I prefer the term 'part' instead of 'component' simply because it is shorter to type :P

Now, to wire this up, starting from the router:

FlowRouter.route('/', {
    name: 'main',
    action() {
        BlazeLayout.render('mainLayout', { content: 'orderPage'});
    }
});

The second parameter to the render method is just a data bag. The intent is to render the layout called 'mainLayout' and in the content place holder render the page called 'orderPage'. The main layout page, has some markup to render the content page:

<div class="container">
   {{>Template.dynamic template=content}}
</div>

You can imagine that within the orderPage view there is markup to render the ingredientsListPart that is the component in charge of displaying the ingredients in the screen. Also, keep in mind that with this change, the subscription to the 'ingredients' collection was moved to the code behind of the ingredientsListPart.

You can follow along by using this tag: https://bitbucket.org/farmas/lunch-time/src/master/?at=v0.2