I am trying to set up an ember app, but am recieving some strange behavior. I have two routes set up: "welcome", which is mapped to "/"; and "features", which is mapped to "/features". When navigating to "/", the welcome template correctly renders. But, when I navigate to "/features", it still renders the welcome template.
This jsbin actually works correctly: http://jsbin.com/OSoFeYe/1 , but the code below, which is from my app, does not.
App.Router.map(function() {
this.route("welcome", {path: "/"});
this.resource("features", {path: "/features"}, function() {
this.route("new");
});
});
App.FeaturesIndexRoute = Ember.Route.extend({
});
<body>
<div class="container">
<script type="text/x-handlebars">
<h1>rendered application template</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="features">
<h2>Render features</h2>
<h6>Done features template</h6>
</script>
<script type="text/x-handlebars" data-template-name="welcome">
<h2>Render welcome</h2>
</script>
</div>
</body>
Any insight to this issue would be appreciated.
Add the following to your js file and you won't need the hash anymore.
App.Router.reopen({
location: 'history'
});
Take the code from your jsbin and stick it in your app, you probably have a typo or some block of code where you shouldn't. I edited your "welcome" template to have the following link in the jsbin and it worked perfectly for me.
<script type="text/x-handlebars" data-template-name="welcome">
<h2>rendering welcome template</h2>
{{#linkTo "features"}}features{{/linkTo}}
</script>
In the welcome link it has a link that says "features" directly below the text "rendering welcome template". And when you click the link it says "rendering features template".
Ok, I think I see the issue here, and it's based on my misunderstanding of how ember routes work. I need to include a hash in my url. So my features url is /#/features, not /features.
Related
I'm a newbie yet on EmberJS, started to learn a week ago. Well, I have some .html file named contactsTemplate.html that is a template what I want to use. Something like this below:
<script type="text/x-handlebars" data-template-name="contacts">
<h2>My Contact List</h2>
{{#each contact in contactList}}
{{contact.name}}
{{/each}}
</script>
Great. I have a index.html file that contains an {{outlet}} expression. It means that every new content will be loaded into this space, right?
<script type="text/x-handlebars" data-template-name="application">
<h1>My Application</h1>
{{outlet}}
</script>
Ok... To manage this template named application, I've created a Controller object.
App.ApplicationController = Ember.ObjectController.extend({
...
});
Same to contacts template:
App.ContactsController = Ember.Controller.extend({
contactList: []
});
I've created two routes to manage this transition between pages:
App.Router.map(function() {
this.route("index", "/");
this.route("contacts", "/contacts");
});
My doubt is:
How can I associate this separated files to a route? I mean, when I call on browser http://mysite.com/ the index.html file should be loaded. When I call http://mysite.com/#/contacts the contactsTemplate.html should be loaded.
Sorry for the long text, and thanks for any help!
By default each declared this.route(routeName) in Router map, will have a [routeName]Controller, [routeName]Route, and expect a [routeName] template, following these conventions described in http://emberjs.com/guides/concepts/naming-conventions/.
To change from one route to other, you can use:
Inside of a controller this.transitionToRoute(routeName)
Inside of a route this.transitionTo(routeName)
Inside of a template {{#link-to "routeName" }}My route{{/link-to}}
You can find more information in the routing guide http://emberjs.com/guides/routing
I hope it helps
I am trying to create my first ember application but I can't have a template load with the application template:
Below is a simplified version of my layout:
<script type="text/x-handlebars">
{{outlet}}
</script>
How do I get the another template into the outlet section on page load?
Thanks in advance
For example if my second template is:
<script type="text/x-handlebars" id="yellow">
<p>Something</p>
</script>
#Marcio answer is correct, ember does create an implicit index route.
However the most important part here is that if you have, say a route like yellow that you want to be rendered inside the application's {{outlet}} (instead of the implicit index template) then you need to define a path for that route so the correspondent named template, (in your case yellow) will be rendered into the application's {{outlet}} instead of the implicit index:
App.Router.map(function() {
this.route('yellow', {path: '/'})
});
<script type="text/x-handlebars" data-template-name="application">
<h1>Hi</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="yellow">
<h2>Welcome from yellow</h2>
</script>
If you don't do this then ember will search for an index template to be rendered inside the outlet, and since you doesn't have one, nothing will be displayed. So again, by defining a path like "/" for your yellow route you instruct ember to use the yellow template instead of the index.
Of course, if you rename your yellow template to index then it will be picked up by ember and rendered inside the application outlet and you don't need to specify a path for the yellow route.
Example jsfiddle.
Hope it helps.
When you create a route like this:
App.Router.map(function() {
this.route('yellow')
});
and a transition is performed to yellow route.
For example, via {{#link-to 'yellow'}}Yellow{{/link-to}} or changing the url tohttp://www.yourhost.com#/yellow`
A handlebar template is appended in the dom, with the same name like the route:
<script type="text/x-handlebars" id="yellow">
<p>Something</p>
</script>
By default ember create a route('index') in your router mapping, like this:
App.Router.map(function() {
this.route('yellow')
// this.route('index', { path: '/' })
});
So creating a index template will work
<script type="text/x-handlebars" id="index">
Welcome
</script>
When the user navigate to the url http://www.yourhost.com, he will see Welcome.
See this demo http://jsfiddle.net/marciojunior/Db49u/
One of my child template is rendering in all routes/links when I click on the browser back/forward button. My route is defined as :
this.resource('analytics', {path: '/analytics'}, function(){
this.resource('analyticsRuns', {path: ':exerciseRunId/analyticsRuns'},function(){
this.resource('analyticsRun',{path: ':runId'});
});
});
and my templates are as follows :
<script type="text/x-handlebars" data-template-name="analytics">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analytics/index">
some content in analytics index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns/index">
some content in analytics runs index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRun">
some content in analytics run index
</script>
My templates are more complex than these but I wanted to give you a gist of what issue I am facing. So when I go from analytics to analyticsRuns and to browser back , then there are no issues, but when I go from analytics -> analyticsRuns -> analyticsRun and then go back to analytics using browser back button, the analyticsRuns template shows up after the analytics template is rendered. Now if I do forward, the analyticsRuns template seems to be appended in all the other routes. I am not sure if I am defining my handlebars wrong which is causing this issue, or maybe the problem lies somewhere else. But if you have any suggestion on how to avoid this issue then I would appreciate it a lot.
In my app setup, "analytics" is not actually a parent resource. Analytics just provides a filter value to "analyticsRuns" by which the master/parent data is loaded.
Thanks,
Dee
I don't know if this will be help to others, but in my case the problem was due to bad HTML markup(I was missing a closing div in one of the templates).
Ok guys- It really shouldn't get simpler than this. I defined a route named about and added a linkTo about in my template, ran it through the outlet and ember works as expected.
I then added another route called foobars, did the same thing with it and get an uncaught error:
Uncaught Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'
Here's my ember
App = Ember.Application.create()
App.Router.map(function(){
this.resource('about');
this.resource('foobars');
});
My drop dead simple html
<body>
<h1>ember</h1>
<script type="text/x-handlebars">
<h2>application template</h2>
<a>{{#linkTo 'about'}} about {{/linkTo}}</a>
<a>{{#linkTo 'foobars'}} foobars {{/linkTo}}</a>
{{ outlet }}
</script>
<script type="text/x-handlebars" id="about">
<h2>about template</h2>
</script>
<script type="text/x-handlebars" id="foobars">
<h2>foobars template</h2>
</script>
Like I said, it works with the about template, so I know my config is ok. I've also tried adding them separately, like so:
App.Router.map(function(){
this.resource('about');
});
App.Router.map(function(){
this.resource('foobars');
});
I would expect that defining two routes would not be that much different than defining one route, but I am not seeming to understand something. Could someone point out the error of my understanding? Thanks!
I think you just didn't save your file before reloading your page. I tried your example and it worked well for me.
However when I comment out the foobars route:
App = Ember.Application.create();
App.Router.map(function() {
this.resource("about");
//this.resource("foobars");
});
I got the same exact error in my console:
Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'
You need to define the routes in the form:
App.FoobarsRoute = Ember.Route.extend({
model: function() {
return App.Foobars.find();
}
});
This will typically go in its own file: /routes/foobars_route.js
I have a very simple Ember.js app which works correctly in IE and Chrome, but fails in Firefox (9.0.1 and 10.0). Any reason why? Here's the code:
<!doctype html>
<html>
<head>
<title>Template Name</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my-template">
{{App.user.name}}
</script>
<div id="container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.user = Ember.Object.create({
name: 'John'
});
App.view = Ember.View.create({
templateName: 'my-template'
});
App.view.appendTo('#container');
</script>
</body>
</html>
The error in firefox is
uncaught exception: Error: <Ember.View:ember143> - Unable to find template "my-template".
This would seem to indicate that the template script has not been evaluated at the point where the app executes. The solution is to wait for onload. Wrap your appendTo like this:
$(function() {
App.view.appendTo('#container');
});
I just experienced the exact same issue. I found out that it was caused due to Ember being dependent on Handlebars. It looks like after version 1.0 they removed the inclusion of the Handlebars source code. After adding in the Handlebars library, the error goes away.
Ember.Application.create({
ready: function() {
App.view.appendTo('#container');
}
});
Tom Whatmore has the correct answer to this in the comments.
The error is displayed in the javascript console only if you use the unminified version of ember.js
The problem is that the template hasn't been evaluated by ember because you're code is executing as soon as the browser hits it, rather than after the ember application has been fully created.