I've just started using Ember.js and have got stuck at the first hurdle!
My URL structure is /username/action, so for example /matt/feed (or just /matt with a default view).
But, although I've managed to get a hardcoded username value to output something, I don't know how to have the username part of the URL be a variable which I can then do things with.
The code I'm using to hardcode the username is below, haven't really got anywhere because I'm not really sure how to get Ember.js to understand my URLs!
'use strict';
window.App = Ember.Application.create();
App.Router.reopen({
location:'history'
});
App.Router.map(function() {
this.resource('matt');
});
Right from the documentation at http://emberjs.com/guides/routing/defining-your-routes/#toc_dynamic-segments
App.Router.map(function() {
this.resource('posts');
this.resource('post', { path: '/post/:post_id' });
});
:post_id is the dynamic segment of the route.
Related
I'm just starting with Ember JS and Ember CLI and trying to figure out this routing issue. I have a group model that has many game models. With the following route, I am able to display games just fine from a group URL:
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
This results in a URL with the form:
http://localhost:4200/groups/1/show
Suppose one of the group names is "wizards". I'd like to to be able to construct a URL in the following form and render all the games that belong to "wizards":
http://localhost:4200/wizards
Any tips are appreciated.
Like #blessenm points out in the comments, your router would change from
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
to
Router.map(function() {
this.resource("group", { path: ':group_name'});
});
The second parameter to this.resource() or this.route() is optional. If you don't pass anything in - it assumes the same name as your route/resource (groups, in your case). If you pass in an object that has a path: key - you are specifying what the url to the route is, including a dynamic segment. See here for Ember documentation on this.
I have a need for deep nesting some routes in ember, I have something like this.
this.resource('wizards', {
path: '/wizards'
}, function() {
this.resource('wizards.google', {
path: '/google'
}, function() {
this.resource('wizards.google.register', {
path: '/register'
}, function() {
this.route('step1');
this.route('step2');
this.route('step3');
this.route('summary');
});
});
});
What I was expecting was as structure like this:
url /wizards/google/register/step1
route name wizards.google.register.step1
route Wizards.Google.Register.Step1Route
Controller Wizards.Google.Register.Step1Controller
template wizards/google/register/step1
but I got this:
url /wizards/google/register/step1 //as expected
route name wizards.google.register.step1 //as expected
route WizardsGoogle.Register.Step1Route
Controller WizardsGoogle.Register.Step1Controller
template wizards/google.register.step1
What I don't get is when does ember stop using capitalization (WizardsGoogle) and start using namespaces (WizardsGoogle.Register). The seemingly inconsistency confuses me. I would have expected either of them.
I met the same things with deep nested resources. Although I didn't know how this happens, what I can tell is that you can always use CapitalizedNestedRoute without namespace, and Ember can recognize it. Although in Ember Inspector it displays "WizardsGoogle.Register.Step1Route".
In your example I defined such route:
App = Em.Application.create();
App.Router.map(function() {
this.resource('wizards', function() {
this.resource('wizards.google', function() {
this.resource('wizards.google.register', function() {
this.route('step1');
this.route('step2');
this.route('step3');
});
});
});
});
App.IndexRoute = Em.Route.extend({
beforeModel: function() {
// Transition to step1 route
this.transitionTo('wizards.google.register.step1');
}
});
App.WizardsGoogleRegisterStep1Route = Em.Route.extend({
model: function() {
// You can see this alert when you enter index page.
alert('a');
}
});
In this example the app will transition to WizardsGoogleRegisterStep1Route with no problem. And if you use container to find route like this:
App.__container__.lookup('route:wizards.google.register.step1').constructor
It will also display App.WizardsGoogleRegisterStep1Route. It's the same as Ember Guide describes. http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources And Ember Guide doesn't introduce namespace route.
So I think it's better to according to what Ember Guide suggests (always use CapitalizedNestedRoute). And in my opinion it's easier to define CapitalizedNestedRoute than nested.namespace.route.
Finally, if you really want to use namespace route/controller/template, you can have a look at Ember.DefaultResolver. Check the API to learn how to extend it so container can lookup modules by your own rules.
Routes are "namespaced" inside resources. And resources uses what you call capitalization, where they sort of define a namespace (for routes to use).
So this set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.route('new');
this.route('old');
this.route('edit');
this.route('whatever');
});
});
Would result in routes with the following name:
PostsRoute
PostsNewRoute
PostsOldRoute
PostsEditRoute
PostsWhateverRoute
Whereas, the following set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.resource('photos');
this.resource('comments');
this.resource('likes');
this.resource('teets');
});
});
Would result in route with the following names:
PostsRoute
PhotosRoute
CommentsRoute
LikesRoute
TeetsRoute
Also note, that resources within resources don't get "namespaced" to the "parent" resource, so you'll always ever have the form:
{CapitalizedResourceName}Route // for resources
{CapitalizedParentResourceName}{RouteName}Route // for routes
I hope this helps you!
I have been trying to set up an Ember.js application together with a RESTful API i have created in Laravel.
I have encountered a problem trying to get the data trough the store, and depending on my implementation, I get different errors, but never any working implementations.
The ember.js guide have one example, other places have other examples, and most information I find is outdated.
Here's my current code:
App = Ember.Application.create();
App.Router.map(function() {
this.resource("world", function() {
this.resource("planets");
});
});
App.PlanetsRoute = Ember.Route.extend({
model: function() {
return this.store.find('planet');
}
});
App.Planet = DS.Model.extend({
id: DS.attr('number'),
name: DS.attr('string'),
subjectId: DS.attr('number')
});
And when I try to click the link for planets, thats when the error occurs, and I get the following error right now:
Error while loading route: TypeError {} ember-1.0.0.js:394
Uncaught TypeError: Cannot set property 'store' of undefined emberdata.js:15
No request is sent for /planets at all. I had it working with a $.getJSON, but I wanted to try to implement the default ember-data RESTAdapter.
For reference, these are some of the implementations i've tried:
var store = this.get('store'); // or just this.get('store').find('planet')
return store.find('planet', 1) // (or findAl()) of store.findAll('planet');
App.store = DS.Store.create();
I also tried DS.Store.all('planet') as I found it in the ember.js api, but seemed like I ended up even further away from a solution.
Most other implementations give me an error telling me there is no such method find or findAll.
EDIT (Solution)
After alot of back and forward, I managed to make it work.
I'm not sure exactly which step fixed it, but I included the newest versions available from the web (Instead of locally), and the sourcecode now looks like this:
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource("world", function() {
this.resource("planets");
});
});
App.PlanetsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('planet');
}
});
App.Planet = DS.Model.extend({
name: DS.attr(),
subjectId: DS.attr()
});
The error you had is probably due to the fact that you added a "s" plural of your objects.
i.e. if you use
App.Planets = DS.Model.extend({
})
you would get that error.
I am just starting with emberjs. I am creating a simple index.html page with two links on top: About and Posts. This is following the standard example on emberjs homepage. I get an error in the browser
"Uncaught TypeError: Cannot call method 'map' of undefined"
So this means that my router is undefined. Why is that?
Here is the app.js code:
var App = Ember.Application.create();
App.router.map(function(){
});
So I tried to define it ...
var App = Ember.Application.create();
App.Router = Ember.Router.extend({
enableLogging: true,
location: 'hash'
});
App.Router.map(function(){
});
I still get the error. I am confused :(.
Make sure you are using the latest version of Ember (1.0.0-RC.2) from http://emberjs.com/.
The example you posted is the old style router which is not used anymore. The new style is explained in this guide and is defined like this:
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
A resource is not an end point. Try the following:
App.Router.map(function() {
this.resource('about', function() {
});
});
So I came across another question on stackoverflow. http://goo.gl/JVEs9. I got a version of ember (1.0.0-pre.2) from the link and re-wrote the code as follows:
var App = Ember.Application.create();
App.Router.map(function(match){
match('/').to('index');
match('about').to('about');
});
This seems to work. I still cannot get:
var App = Ember.Application.create();
App.Router.map(function(){
this.resource('about');
});
I get the error
Uncaught TypeError: Object # has no method 'resource'
I'm experimenting with routing in ember at the moment, and have a working example. The problem is, I'm a bit confused WHY it works. Currently this route just has 2 simple views. Here is the code:
App = Em.Application.create();
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'home' //when hitting the base URL, redirect to home
}),
home: Ember.Route.extend({
route: '/home',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('home');
}
}),
about: Ember.Route.extend({
route: '/about',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('about');
}
})
})
});
//Main controller + view
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
templateName: 'application',
goHome: function(){
App.router.transitionTo('home');
},
goAbout: function(){
App.router.transitionTo('about');
}
});
// Home page
App.HomeView = Ember.View.extend({
templateName: 'home'
})
// About page
App.AboutController = Ember.Controller.extend({
numWidgets: 45
})
App.AboutView = Ember.View.extend({
numWidgetsBinding: 'App.aboutController.numWidgets',
templateName: 'about'
})
App.initialize();
In my HTML I just have a couple of really simple templates with the names "application", "home" and "about".
So, it all works, and looks very similar to all the examples floating about on the net. Great! But I'm confused about how it seems I have several things instantiated for me, without me asking to do it. Is this correct?
For example:
How is it creating an instance of ApplicationController?
In the connectOutlets functions, it's looking for a controller called "applicationController". I never created anything called "applicationController" (with lower-case "a"), I just extended a controller and called it "ApplicationController" (with a capital "A"). Why does this work?
How is it creating an instance of AboutController?
I did a simple test binding between the "about" page view and controller. In the view, I am binding with the variable 'App.aboutController.numWidgets'. I never called App.AboutController.create(). So how is there an instance of this ready for me to talk to? Again, it has a lower case letter ("aboutController"). All I ever did was extend a controller (and named it with a capital letter - "AboutController")
A little explanation would be great, as like any normal developer, I feel that using code where you dont know why it's working is crazy!
App.initialize(); does all the instantiation and injection stuff :), based on strong naming conventions: Ember naming / capitalization convention. When you call xxxController.connectOutlet(options), the option has is also conventional, see Confusion about naming conventions in emberjs
Hope that helps.
EDIT: With the latest master, you don't have to call App.initialize() manually. The application is auto-initialized when all is ready :)