My meteor application has the following basic layout:
<template name="layout">
{{> header}}
{{> yield}}
{{> footer}}
</template>
My header template contains a full-width header:
<template name="header">
<div>
<!--implementation of full-width header-->
<h1>{{pageTitle}}</h1>
<!--insert custom html here, e.g. search input or options (see screenshot)-->
</div>
</template>
Then, I have multiple yield templates, that's where the main content goes.
For each of my yield templates, I want to be able to load custom content "into" my header template:
set the pageTitle attribute, so I have a custom title on every routed page
insert some html content, e.g. to do show some extended options (in this example it's about filtering the result of the query, but basically it's html content)
What's the best way to do this?
For a better understanding I include a screenshot of how the page looks like:
EDIT
I came up with the following. I add another base template to the layout, let's call it headerYield:
<template name="layout">
{{> header}}
{{> headerYield}}
{{> yield}}
{{> footer}}
</template>
All the custom markup would go there, with the disadvantage, that I need 2 custom templates for each view.
This question isn't clear. Is the question how can I include a header template? If so then this would be the answer...
<template name="header">
<div> <!-- abosolute position full div --> </div>
<!-- markup here brah -->
</template>
Now if the question is how can I include a page title? If so then this would be the answer...
Router.route('/user', {
onAfterAction: function() {
document.title = 'page title';
}
});
This assumes you have the iron router package installed. Iron router just controls what template gets rendered when looking at particular pages. For example the route "/user" could be sent to any template that you choose. If you want information on how to install iron Router or what it can do you can see their documentation. It's necessary for meteor applications:
iron router
Update:
After looking at your profile your other questions include iron router so you have used it before. So now I am really confused as to what your question is.
Related
I have some trouble. I have a first page in Meteor
.
and my second page and it in same folder with my first page
.
My first page html:
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
{{> test}}
</div>
</body>
<template name="chuong">
<ul>
{{#each chuongs}}
<li>{{Chuong_ID}}, {{Truyen_ID}}</li>
{{/each}}
</ul>
</template>
My firts page in javascript:
import { Template } from 'meteor/templating';
import { Chuong } from '../api/chuong.js';
import './doctruyen.html';
Template.chuong.helpers ({
chuongs() {
return Chuong.find({});
},
});
My second Page in html:
<body>
<h1>MY SECOND PAGE</h1>
</body>
in first page, when I click items will show the second page....
Thanks for help!
It's best to use a router to have multiple, linked pages in Meteor. While there are a few you could use, my preference (and a common standard) is iron:router.
There are pretty good examples on the above-linked page and in the Iron Router Guide, but here are some entry-level concepts to get your mind around things:
You don't need to put <body> tags everywhere. Any <body> tag in an HTML file will be inserted into all rendered pages by default. The same is true of <head> tags.
Each "Page" needs a template (as you've successfully defined with Template#chuong). I like to put my templates all in their own HTML files, but you can put templates anywhere inside your "client" directory. You can also add common layouts which you'll read about in the Iron Router documentation.
Each "Page" also needs a "Route", which can be defined in a javascript file anywhere in your project, excluding server-only directories (like the "server" and "private" folders, for example.
Once the above is handled, you should be able to link between pages the same way you usually would, using standard anchor tags (href="/routename").
In meteor, you can include a template like this
{{> exampleTemplate }}
or we can use
{{> yield}}
another way is
{{> Template.dynamic template=example data=this}}
So what's the difference? Under what situations should we choose?
{{> yield}} is used to load templates according to defined routes in Iron router for example
{{> exampleTemplate}} is used to load a specific template on another template. You can split your templates into different components and load them like that.
{{> Template.dynamic template=example data=this}} is used to render a template dynamically. This means that you can code the logic of which template to render in the template helper 'example' in js file.
I'm still learning the ins and outs of Meteor. I'm using iron router and am routing pages successfully. The layout page where my routes go looks basically like this. They're loading under a header and title with some buttons in it:
<template name="layout">
<div class="container">
... // some buttons here
... // more buttons
</div>
<h3>Header Title</h3>
<div class container>
{{> yield}}
</div>
</template>
I've got the layout template as my default:
Router.configure({
layoutTemplate: 'layout'
});
As you can see my routes are loading in the layout template but there's one page I'd like to route to a completely blank template, but right now the it's inside the layout template. Can I have a routes go to different {{> yield}} tags in some way?
You're looking for Route Controllers:
http://iron-meteor.github.io/iron-router/#creating-route-controllers
This will allow you to specify a layoutTemplate on a particular group of routes, rather than globally. You can then create different groups for different sets of routes requiring different layout templates (and other things, too).
I am new to Meteor. I have a website that I want to convert into meteor. Do I have to set up a router, and change all of the links? Or can I use the existing href links that navigate between the html pages? Will images be a problem? Will the css and javascript in each of the page headers work?
If you have Routes you should define it using the meteor package iron:router, here is common tutorial
so if you have something like myUrl/about.
you should do something in meteor like this.
Router.route('about',function(){
this.render('about') //and you should have a <template name="about></template>
})
About images, you should put images under the /public directory, check more on the official meteor docs structuringmyapp.
If you web use jquery plugins you should use a onRendered function
Template.example.rendered(function(){
//initialize jquery plugins
})
All this because like you say on the question, you have Routes, if you don't have routes.
If you want to test it on a live editor you can use Meteorpad.
I recommend you to read the discoverMeteor book or install the 2 example from meteor, also the Meteor tutorials Begginers its a good option here
Add iron:router to route your website.
// Router Example
Router.configure({
layoutTemplate: 'Layout' //Layout is a template for your website
});
Router.map(function() {
this.route('index', {path: '/'}); // Index is an another template
});
Layout template should have {{> yield}} tag
<template name="Layout">
// Include header in separate template
{{> yield}}
// Include footed in separate template
</template>
<template name="index">
<!-- Page content -->
</template>
to execute JQuery ready function by
Template.Layout.onRendered({
//JQuery content HERE
});
Hope this will enough for simple website
I am trying to build a Meteor app which should support two totally different themes (members - admin), each theme include its own separate css, LESS, JS and html files. So I was wondering does Meteor support multiple client themes and dynamic switching between themes? Thanks
You should be able to use Controllers using the iron:router package to achieve what you are looking for.
meteor add iron:router
Create your layouts:
<template name="AdminLayout">
<div>
{{> yield}}
</div>
</template>
<template name="MemberLayout">
<div>
{{> yield}}
</div>
</template>
Then define your controllers:
AdminController = RouteController.extend({
layoutTemplate: 'AdminLayout'
});
MemberController = RouteController.extend({
layoutTemplate: 'MemberLayout'
});
And then you can define your routes and specify the controller they use:
Router.route('/admin', {
controller: 'AdminController'
});
Router.route('/', {
controller: 'MemberController'
});
Then just create separate templates using the different css, js, and whatnot.
You can read more about the package here: Iron Router