This seems like a basic one but i can't get Iron Router to render my template in the correct place on the page.
In my router controller I have:
Router.configure({
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home',
layoutTemplate: 'layout'
});
this.route('posts', {
});
this.route('post', {
path: '/posts/:_id'
});
});
In the layout html page I have:
<body>
<!-- some other static page stuff here -->
<div class="container">
<template name="layout">
{{yield}}
</template>
</div>
</body>
Basic version of home template looks like:
<template name="home">
<h1>Home Page</h1>
</template>
I have tried a few variation on this but the home template is always rendered at the bottom of the layout template just before the closing body tag rather than in the div.container
You've placed the tags a bit incorrectly.
Templates need to be on their own & the body tag should be empty:
<body>
<!-- There isn't anything here really -->
</body>
<template name="layout">
<div class="container">
{{>yield}}
</div>
</template>
This should work for your home route but not your post ones, because you haven't given them a layout template.
You can set a universal layout so it would work on posts and home (if you didn't set a layout template there - which overrides the one below) using:
Router.configure({
loadingTemplate: 'loading',
notFoundTemplate: 'notFound',
layoutTemplate: 'layout'
});
So iron-router places your layoutTemplate in body for you.
Related
In a regular php web page I would include Vue.js via cdn and my component like this:
<!--Load Vue-->
<script src="https://unpkg.com/vue"></script>
<!--Load the web component polyfill-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="./my-custom-element.js"></script>
<!--Use my custom element-->
<my-custom-element msg="Hello..."></my-custom-element>
Is this somehow possible in a Wordpress site?
You just need to provide a div element with an id for Vue to use:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
Vue.component('MyButton',{
template:'<button><slot></slot></button>'
})
new Vue({
el: '#app',
data : ()=>({
items : ['a','b','c'],
}),
template: `<div>
<my-button v-for="i in items" :key="i">{{i}}</my-button>
</div>`
})
</script>
https://jsfiddle.net/ellisdod/2yn7metj/
I am trying to apply routing with the help of flow router package. But it is not working for me as what I had expected. I will share my code, please let me know where I am going wrong! Thanks in Advance.
FlowRouter.route('/',{
name:'home',
action(){
BlazeLayout.render("HomeLayout");
}
});
FlowRouter.route('/test',{
name:'test',
action(){
BlazeLayout.render('MainLayout',{main:'Test'});
}
});
And I am getting following error when I go to localhost:3000/test.
modules-runtime.js:36Uncaught Error: Cannot find module './main.html'
Exception in defer callback: Error: Expected template or null, found: undefined
at ._render (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:61:13)
at doRender (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2027:25)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1875:20
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1873:29
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2214:12)
at viewAutorun (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1872:18)
at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:339:36)
at new Tracker.Computation (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:229:10)
at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:604:11)
Please tell me where I am wrong? Do I need to make any changes in my code?
Here is my index.html file code :
<head>
<title>intermediate-meteor</title>
</head>
Here is my MainLayout.html:
<template name="MainLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
{{>Template.dyanamic template=main}}
</main>
</template>
<template name="Test">
<h1>Test Template Rendering form Main Template...!!</h1>
</template>
Here is my HomeLayout.html:
<template name="HomeLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
<div class="billboard">
<h2>Organize your meals</h2>
</div>
</main>
</template>
Package.jason file code:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
standard-minifier-js#1.2.0 # JS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
shell-server#0.2.1 # Server-side component of the `meteor shell` command
kadira:flow-router
kadira:blaze-layout
Please go through my code and tell me where i am doing a mistake?
Your index.html file is the one that needs the dynamic Template: index.html
<head>
<title>intermediate-meteor</title>
</head>
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then you can control what template gets loaded from what URL in the routes.
So at the end, your routes should look like this:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render('layout', { main: 'MainLayout' });
}
});
FlowRouter.route('/test', {
action: function() {
BlazeLayout.render('layout', { main: 'Test' });
}
});
FlowRouter.route('/home', {
action: function() {
BlazeLayout.render('layout', { main: 'HomeLayout' });
}
});
I have my HTML setup with an index.html file that only load the main template:
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then I create a new HTML file for each template: test.html
<template name="test">
<h1>Hello, this is a test page</h1>
</template>
And of course, your homelayout template in another file: homelayout.html
<template name="homelayout">
<h1>Hello, this is the home page</h1>
</template>
It seems that you deleted the default client/main.html file. Did you update the "import './main.html'" line in client/main.js ?
I've created a new meteor project called TEST and ended up with:
test.html
test.css
test.js
Now I installed the iron router and would like that the route page "/" shows directly to the test.html
Now I don't have a template on that page... it's just standard HTML layout:
<head>
...
</head>
<body>
...
</body>
Still Iron router requires a template configurtion e.g.
Router.route('/', {
name: 'home',
template: 'home'
});
So how can I point to that one SINGLE page?
[EDIT]
I tried with:
Router.route('/', {
name: 'body',
template: 'body'
});
and ended up duplicating my test.html page (like replicate itself for 2 times) lol :D
Did you try just Router.route('/')?
I think Iron:router will render all <body></body> tags (they are merged in Meteor) by default, i.e. if no template is set in route configuration.
I have a simple meteor build here https://github.com/MARS1/meteorTest
My problem is that there are no errors yet when I go to my local host I get a blank page and no clue as to why the app is not rendering.
I know this is a pretty basic question and I often find that most people don't get hung up on questions like this one but for some reason I do:)
Any help would be greatly appreciated I think anyone that has used Meteor for a few months would probably be able to solve in minutes.
Here are my routes:
Router.configure({
layoutTemplate: 'appLayout',
yieldTemplates: { //updated per comment
header: {to: 'header'},
home: {to: 'home'},
footer: {to: 'footer'}
}
});
Router.route('/' , {
name: "home"
});
Here is my template:
<template name="home">
<h1>Hello World this is the Home page</h1>
</template>
Here is my main layout:
<head>
<title>Static title</title>
<meta charset="utf-8">
</head>
<template name="appLayout">
{{> header}}
<div class="container">
{{> yield}}
</div>
{{> footer}}
</template>
Thanks.
Using Meteor 0.9.3 and iron:router 1.0.0-pre2, this error shows on the console even though iron:layout was installed, see below:
willems-mini:iron willem$ meteor add iron:router#=1.0.0-pre2
added iron:location at version 1.0.0-pre2
added iron:dynamic-template at version 1.0.0-pre2
added iron:router at version 1.0.0-pre2
added iron:layout at version 1.0.0-pre2
added iron:middleware-stack at version 1.0.0-pre2
added iron:url at version 1.0.0-pre2
added iron:controller at version 1.0.0-pre2
added iron:core at version 1.0.0-pre2
iron:router: Routing specifically designed for Meteor
There are no other packages, just the defaults for meteor:
willems-mini:iron willem$ meteor list
autopublish 1.0.0 Publish the entire database to all clients
insecure 1.0.0 Allow all database writes by default
iron:router 1.0.0-pre2 Routing specifically designed for Meteor
meteor-platform 1.1.1 Include a standard set of Meteor packages in your app
I am trying to run a very simple app:
1 javascript file:
Router.route('/', function () {
this.render('home');
});
if (Meteor.isClient) {
Template.home.events({
'click button': function () {
console.log('click!');
}
});
}
and 1 html file:
<head>
<title>iron router test</title>
</head>
<body>
{{> defaultLayout}}
</body>
<template name="defaultLayout">
<header>
{{> yield "header"}}
</header>
<article>
{{> yield}}
</article>
<footer>
{{> yield "footer"}}
</footer>
</template>
<template name="home">
{{#contentFor "header"}}
<button>click header</button>
{{/contentFor}}
<button>click</button>
{{#contentFor "footer"}}
<button>click footer</button>
{{/contentFor}}
</template>
This is not how iron:router layouts are supposed to work.
Get rid of your explicit inclusion of the layout in the body :
{{! this is WRONG, remove the body tag altogether }}
<body>
{{> defaultLayout}}
</body>
The place where your specify the layoutTemplate is in the RouteController :
Router.route('/', function () {
this.render('home');
},{
layoutTemplate:"defaultLayout"
});
Declaring explicitly your RouteControllers is usually a nicer design pattern.
lib/router.js
Router.route("/",{
// give the route a name so it figures out itself to use :
// - HomeController
// - a template name "home"
name:"home"
});
lib/controllers/lib/default-layout.js
DefaultLayoutController=RouteController.extend({
layoutTemplate:"defaultLayout"
});
lib/controllers/home.js
HomeController=DefaultLayoutController.extend({
//
});
Well, like your error says you're missing an iron layout.
Could look something like this in your lib/router.js or wherever you hold your router code:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
And so the respective <template name="layout"> should be there.