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.
Related
I'm currently working on a BigCommerce theme using their Stencil framework. It leverages Handlebars.js for some logic already and I'm trying to use it to show specific html on specific pages.
Looking at the documentation I can see there is a "pages" object and that I should be able to name or URL to do what I need to do.
I cannot figure out the syntax to get the page name or url to run the iff against. I can succesfully get it to do what I want by testing if it's a page content type, but not any of the type properties.
{{#if pages }}
... do foo here
{{/if}}
What I want to do is something like
{{#if pages.url '===' 'about' }}
... do foo here
{{/if}}
{{#if pages.url '===' 'service' }}
... do foo different here
{{/if}}
It looks like you are actually using the wrong Object Model for the data that you are trying to pull. The first word of your handlebars object should be "page" and not "pages". This will pull any content or data from the static pages that you build in the back office. (AKA the WYSIWYG)
Here is a link to the docs of the model that you want. https://stencil.bigcommerce.com/docs/page-content-object
For Example:
{{{page.title}}}
{{{page.content}}}
Note that I am using 3 handlebar on each side to escape the HTML on the WYSIWYG. Let me know if you need any other help.
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.
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