I have installed the atmosphere package iron:router for my meteor application. I am trying to add a simple route like this:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
Router.route('/', {
name : 'homeIndex'
});
I defined a template:
<template name="homeIndex">
<h1>Test for my meteor application</h1>
</template>
And I add a yield - field to my layoutTemplate:
<template name="layout">
<div class="container">
{{> yield}}
</div>
</template>
But still when I go to '/', I don't see anything of my template.
Also when I'm trying to add another route with another template, it doesn't work. I have installed the package through this command: meteor add iron:router
Can someone please tell me what I'm doing wrong?
If you want to render a template when a user goes to a particular route, you should use this.render('templateName');. In your case, you only defined a named route, but you didn't specify which template to render.
Router.route('/', function () {
this.render('homeIndex');
}, {
name: 'homeIndex'
});
When I looked at my console in the browser, I saw the iron router package was throwing an exception that EJSON was undefined in the javascript of the package. I installed the EJSON package with the command meteor add ejson, and it was fixed! But thanks anyway for the help!
Related
Not long ago I hear about glimmer and decide to try it out.
Now I already try to do their tutorial and see the todo-mvc that glimmer already create but it seems that they use navigo to navigate through page.
I want to know if there's any proper way to setup route since previously I use ember.js and to setup route I just need to add another route at router.js.
Because of using navigo now I use code like this to navigate through routes
component.ts
import Component, { tracked } from '#glimmer/component';
import Navigo from 'navigo';
const router = new Navigo(null, true);
export default class MainPage extends Component {
#tracked routeName;
constructor(options){
super(options);
router
.on({
'/': () => { this.routeName = 'home'; },
'/posts': () => { this.routeName = 'postList'; }
})
.resolve();
}
};
template.hbs
<div>
<button>See All Posts</button>
{{#if (eq routeName 'postList')}}
<post-list />
{{/if}}
{{#if (eq routeName '404')}}
<h1>PAGE NOT FOUND</h1>
{{/if}}
</div>
Above code is working but it need me to have # after the domain. I think need to find another way or maybe more proper way than this one.
The current answer to your question is that Glimmer does not have such concept as routes. In future, you should be able to install parts of Ember - such as Ember routing to your Glimmer app.
Basically, it will work like this:
Glimmer application -> Installing all Ember packages = Ember application.
Or:
Glimmer application -> Installing only a few Ember packages = Glimmer + parts from Ember such as routing.
I'm on Ember Cli version: 0.2.3
I'm currently exploring with Ember, and trying a very simple app.
I have this in my templates/about.hbs
<h1>About</h1>
<p>I'll write something interesting here</p>
<button type="btn btn=primary"{{action 'clickMe'}}>Click me!</button>
and in my controllers/about_controller.js
Blogger.AboutController = Ember.Controller.extend({
actions: {
clickMe: function() {
alert('Something something');
}
}
});
when I click on the button i get this error, I checked the syntax and can't seem to catch what's wrong. I need some fresh eyes.
Uncaught Error: Nothing handled the action 'clickMe'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
Now, I understand what the message is saying, but I don't know how to fix it yet.
Ember probably can not find your controller. You can debug this using ember inspector. In any case you should be using ES6 conventions inside your ember cli project. You can get to know more about the subject here.
Anyway, try to create about controller using command line by typing
ember generate controller about
and then add your action manually.
Are you using ember cli or Ember starter Kit for your program.
If you are using Ember cli then you should create files like -
app/templates/about.hbs
app/controllers/about.js
and you should make one entry in app/router.js too[I think you must have done that.]
Entry in router.js-
Router.map(function() {
this.route('about');
});
Now your template/about.hbs should be-
<h1>About</h1>
<p>I'll write something interesting here</p>
<button {{action 'clickMe'}}>Click me!</button>
and controllers/about.js should be-
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
clickMe: function() {
alert('Something something');
}
}
});
After making all the above changes execute below command on CMD -
ember server (this should start the server)
Your code should work if you do it in above pattern.
Naming conventions are very important in Ember.
I'm new to MeteorJS. I was reading up Discover Meteor while trying to build an app of my own (instead of the demo app Microscope). When setting up a router.js I encountered this problem.
{{> yield}} in the layout Template is causing a blank page on / when I tried using name for routing:
Router.route('/', {name: 'home' })
(where home is a template defined in the client repository.)
Conclusion:
I checked my iron-router's version in .meteor/versions and realized it was 0.9.3, while the one in the demo app is 1.0.0.
I tried updating it
meteor update iron:router
but it can only be updated to 0.9.4 due to other packages I have. 0.9.4 is the latest compatible version.
So this appears to be a backward-compatibility issue. Somehow the function
Router.route(uri, {name: templateName });
doesn't seem to work with {{> yield}}, which is why I'm getting a blank page.
(although using {{yield}} would output the string [object object]).
Solution:
I used a different function to route instead
Router.route(templateName, {path: uri});
together with map:
Router.map ->
#route 'home',
path: '/'
return
#this is CoffeeScript
I have problem with iron-router controllers in package.
My code:
Router.map(function() {
this.route('registration.index', {path: '/registration'});
});
RegistrationIndexController = RouteController.extend({
layoutTemplate: 'IntranetLayoutSimple'
...
});
LayoutTemplate not working
If you're creating new route controllers inside package and want to use them in main app, remember to export it, e.g.:
api.export('RegistrationIndexController', ['client', 'server']); in package.js
I often used routes with the path '/' to specify them as the default route.
Now I noticed that it didnt work as expected with the link-to helper.
I used this in an older version of emberjs and I think it worked.
So when I have a language route with a dynamic segment which contains a courceCategories route that has the path '/' and use the {{#link-to "language" model}}click{{/link-to}} helper I get the following error:
Assertion failed: The attempt to link-to route 'language' failed (also tried 'language.index'). The router did not find 'language' in its possible routes: 'loading', 'error', 'languages', 'language.loading', 'language.error', 'language.courceCategories', 'index'
Why cant the router resolve this url?
demonstration: http://emberjs.jsbin.com/umeFeBe/2/edit
Thanks
This is a bug in Ember, and it's been reported here.
This PR should fix this, Try with the canary build once the PR is merged.
UPDATE: The PR has been merged, and this works now, check here
That's because you're overriding the language.index value when you do the route / path inside its function. You now need to link to language.courceCategories
<script type="text/x-handlebars" data-template-name="languages">
{{#each this}}
{{#link-to "language.courceCategories" this}}{{id}}{{/link-to}}
{{/each}}
</script>