Last active
August 29, 2015 14:01
-
-
Save kingluddite/3b145e0502fd8c2b42f0 to your computer and use it in GitHub Desktop.
3 files to create your meteor app's main layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template name="layout"> | |
<div class="container"> | |
<header class="navbar"> | |
{{> Menu}} | |
</header> | |
<div id="main" class="row-fluid"> | |
{{> yield}} | |
</div> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<title>My Full Blown App</title> | |
</head> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
/client/main.html
Here we set up our basic layout. Directly inside the client directory, we drop main.html with is just a head and a title. One of the great things of meteor is you don't need the doctype or worry about adding link tags pointing to css or script tags point to js files. Meteor takes care of all that stuff at run time.
/client/views/common/layout.html
Next we deal with our basic layout for our site. Router.js is point to this file. We pull in Menu using {{> Menu}}. Notice the capitalization of 'Menu'. I use this so I know that this will be a template (it links to menu.html with a template named 'Menu'.
client/views/common/menu.html
Here is our basic nav. The main thing to point out is how we make our links work. We use handlebars {{pathFor and points to the name of the template.