Is it at all possible to get the query string parameters in pre2?
e.g., we would like to transition to a route like so: #/customer/CN-001 where CN-001 would match some parameter along the lines of /customer/:customernumber.
I think this is what you want:
Routers:
App = Ember.Application.create({
ApplicationController: Ember.ObjectController.extend(),
CustomerController: Ember.ObjectController.extend(),
Router: Ember.Router.extend({
root: Ember.Route.extend({
index: Em.Route.extend({
route: '/',
connectOutlets: function(router) {
router.route('/customer/CN-001');
}
}),
customer: Em.Route.extend({
route: '/customer/:customernumber',
connectOutlets: function(router, customer) {
router.get("applicationController").connectOutlet('customer', customer);
},
serialize: function(router, context){
return { id: context.number };
},
deserialize: function(router, params) {
return Ember.Object.create({ number: params.customernumber });
}
})
})
})
});
App.CustomerView = Ember.View.extend({
templateName: 'customer'
})
Templates:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="customer">
<h2>Customer</h2>
{{number}}
</script>
Here is a jsfiddle showing this working.
I hope it help.
Related
I am kind of stuck and can't figure out why the blog post is not reloading on refresh. I know it has to do with the App.PostRoute but can't seem to see what is wrong with it.
App.Router.map(function() {
this.resource('about');
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return $.get('/posts').then(function(data) {
return data.posts.map(function(post) {
return post;
});
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts');
return posts.findBy('id', params.post_id);
}
});
Tried your js code and it seems to work fine, so i guess it's probably the templates.
http://emberjs.jsbin.com/jivudadewihe/1/edit
hbs
<script type="text/x-handlebars" data-template-name="posts">
<ul>
{{#each post in model}}
<li>
{{#link-to "post" post.id}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
<hr/>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post">
{{this.id}}<br/>
{{this.title}}
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect:function(){
this.transitionTo("posts");
}
});
var postsData = [
{id:"1",title:"post1"},
{id:"2",title:"post2"},
{id:"3",title:"post3"}
];
App.PostsRoute = Ember.Route.extend({
model: function() {
return $.get('').then(function(data) {
return postsData.map(function(post) {
return post;
});
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts');
return posts.findBy('id', params.post_id);
}
});
<script type="text/x-handlebars" data-template-name="application">
<ul>
{{#each person in controller}}
<li>{{#link-to 'foo' person}}{{person.firstName}}{{/link-to}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<h5>Foo route</h5>
{{name}}: converted to {{fullName}}
</script>
javascript:
App = Ember.Application.create({});
App.ApplicationRoute = Ember.Route.extend({
model: function(){
return [
{firstName: 'Kris', lastName: 'Selden'},
{firstName: 'Luke', lastName: 'Melia'},
{firstName: 'Formerly Alex', lastName: 'Matchneer'}
];
}
});
App.Router.map(function() {
this.route('foo');
});
App.FooRoute = Ember.Route.extend({
model: function(params) {
// just ignore the params
return Ember.Object.create({
name: 'something'
});
}
});
App.FooController = Ember.ObjectController.extend({
fullName: function() {
return this.get('name') + ' Jr.';
}
});
I must be doing something wrong, because these {{#link-to}}'s are failing. Here's a JSBin. Hesitating to file an issue because this seems like such a simple thing:
http://jsbin.com/ucanam/4777/edit?html,js,output
Your route does not allow parameter. Change it to
this.resource('foo', { path: '/:person_id'});
This Emberjs router refuses to work with jsfiddle Jquery onDomReady and returns the error ; Uncaught Error: assertion failed: Could not find state for path: "root".
However, when i change the jsfiddle jquery settings to onLoad, the page loads but the router still seems unrecognized and any attempt to do a manually transition of the router fails with the message error: Cannot call method 'transitionTo' of undefined. But if i click one of the action helpers in the view that points or links to a route, it throws the error.
Any suggestions on how to resolve this will be greatly appreciated.
App = Ember.Application.create({
ready: function(){
App.router.transitionTo('root');
}
});
App.stateFlag = Ember.Mixin.create({
stateFlag: function(name) {
var state = App.get('router.currentState.name');
while (state.name === name) {
state = state.get('parentState');
console.log('state');
//return true;
}
}.property('App.router.currentState')
});
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.HomeController = Em.ObjectController.extend();
App.HomeView = Em.View.extend({
templateName: 'home'
});
App.LoginController = Em.ObjectController.extend();
App.LoginView = Ember.View.extend({
tagName: 'form',
templateName: 'logging',
});
App.SectionController = Em.ObjectController.extend(App.stateFlag, {
stateFlag: 'sectionA',
stateFlag: 'sectionB'
});
App.SectionView = Ember.View.extend({
templateName: "sub_section_b_view"
});
App.SectionA = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
templateName: "section A"
});
App.SectionB = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
templateName: "section B"
});
App.Router = Ember.Router.extend({
enableLogging: true,
location: 'hash',
root: Ember.Route.extend({
anotherWay: Ember.Router.transitionTo('root.logon.index'),
showLogin: function(router, event) {
router.transitionTo('root.logon.index');
},
doHome: function(router, event) {
router.transitionTo('home');
},
doSections: function(router, event) {
router.transitionTo('section.index');
},
home: Ember.Route.extend({
route: '/',
connectOutlets: function(router, event) {
router.get('applicationController').connectOutlet('home');
}
}),
logon: Ember.Route.extend({
route: '/login',
enter: function(router) {
console.log("The login sub-state was entered.");
},
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('mine', 'login');
router.get('applicationController').connectOutlet('section');
},
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('loginController').connectOutlet('loga', 'login');
}
})
}),
section: Ember.Route.extend({
route: '/section',
connectOutlets: function(router, event) {
router.get('applicationController').connectOutlet('section');
},
index: Ember.Route.extend({
route: "/"
}),
doSectionA: function(router, event) { router.transitionTo('section.sectionA');
},
sectionA: Ember.Route.extend({
route: 'section A',
connectOutlets: function(router, context) {
router.get('sectionController').connectOutlet('sectionA');
}
}),
doSectionB: function(router, event) { router.transitionTo('section.sectionB');
},
sectionB: Ember.Router.extend({
route:'section B',
connectOutlets: function(router, context) {
router.get('sectionController').connectOutlet('sectionB');
}
})
})
})
});
The handlebar templates
<script type="text/x-handlebars" data-template-name="application">
<h1>Hi samu</h1>
{{outlet loga}}
{{outlet }}
<a href="#" {{action showLogin }}> go to root.logon.index state</a>
<br>
<a href="#" {{action anotherWay}} >it works to go to root longon index using this</a>
</script>
<br>
<script type='text/x-handlebars' data-template-name='home'>
</script>
<br>
<script type="text/x-handlebars" data-template-name="logging">
{{view Ember.TextField placeholder="what" class="userInput" }}
{{outlet loga}}
<br>
<b> Inserted from Login controller and view </b>
</script>
<script type="text/x-handlebars" data-template-name="sub_section_b_view">
<b>Inserted from the subsection controller and view </b>
</script>
<script type='x-handlebars' data-template-name='section A' >
</script>
<script type='x-handlebars' data-template-name='section B' >
</script>
After tinkering about, i go everything working. The named outlet works and the nested sub-route works. Here is the working jsfiddle. In that jsfiddle, if you click, 'go to root.logon.index state' if will render the form being provided by the named outlet called {{outlet loga}}.
If you click the link called testing sections, it will render the section view which displays two link to two sub-sections, click on any of them renders their content. Also i tried to break each of the routes in the Router into many classes or standalone classes and then creating new routes tat extending those classes from inside the Router, to simulate splitting Emberjs Router across many files to reduce the Router size in real life situations and it worked
Here is the whole code.
Handlebars template
<script type="text/x-handlebars" data-template-name="application">
<h1>Hi Laps</h1>
{{outlet loga}}
{{outlet }}
<a href="#" {{action showLogin }}> go to root.logon.index state</a>
<br>
<a href='#' {{action doSection}}> testing sections</a>
</script>
<br>
<script type='text/x-handlebars' data-template-name='home'>
</script>
<br>
<script type="text/x-handlebars" data-template-name="logging">
{{view Ember.TextField placeholder="what" class="userInput" }}
{{outlet loga}}
<br>
<b> Inserted from Login controller and view </b>
</script>
<script type="text/x-handlebars" data-template-name="sub_section_b_view">
<b>Inserted from the subsection controller and view </b>
<a href='#' {{action doSectionA}}><p>Sub section yea</p></a>
<br>
<a href='#' {{action doSectionB}}> our B part yep</a>
{{outlet}}
</script>
<script type='text/x-handlebars' data-template-name='sectionA' >
<br>
<font color="red">my section a is working</font>
</script>
Javascript/Emberjs bit
App = Ember.Application.create({
ready: function(){
//App.router.transitionTo('root.home');
}
});
App.stateFlag = Ember.Mixin.create({
stateFlag: function(name) {
var state = App.get('router.currentState.name');
while (state.name === name) {
state = state.get('parentState');
console.log('state');
//return true;
}
}.property('App.router.currentState')
});
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.HomeController = Em.ObjectController.extend();
App.HomeView = Em.View.extend({
templateName: 'home'
});
App.LoginController = Em.ObjectController.extend();
App.LoginView = Ember.View.extend({
tagName: 'form',
templateName: 'logging',
/* class name does not work */
className: ['userInput']
});
App.SectionController = Em.ObjectController.extend(App.stateFlag, {
stateFlag: 'sectionB'
});
App.SectionView = Ember.View.extend({
templateName: "sub_section_b_view"
});
App.SectionAController = Em.ObjectController.extend();
App.SectionAView = Ember.View.extend({
templateName: "sectionA"
});
App.SectionBController = Em.ObjectController.extend();
App.SectionBView = Ember.View.extend({
templateName: "sectionB"
});
App.SectionARoute = Ember.Route.extend({
connectOutlets: function(router, context) {
router.get('sectionController').connectOutlet({viewClass: App.SectionAView});
}
});
App.SectionBRoute = Ember.Route.extend({
connectOutlets: function(router, context) {
router.get('sectionController').connectOutlet({viewClass: App.SectionBView});
}
});
App.Router = Ember.Router.extend({
enableLogging: true,
location: 'hash',
root: Ember.Route.extend({
anotherWay: Ember.Router.transitionTo('root.logon.index'),
doSection: Ember.Router.transitionTo('root.section.index'),
showLogin: function(router, event) {
router.transitionTo('root.logon.index');
},
doHome: function(router, event) {
router.transitionTo('home');
},
doSections: function(router, event) {
router.transitionTo('section.index');
},
home: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('home');
}
}),
logon: Ember.Route.extend({
route: '/login',
enter: function(router) {
console.log("The login sub-state was entered.");
},
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('loga', 'login');
}
})
}),
section: Ember.Route.extend({
route: '/section',
doSectionA: Ember.Router.transitionTo('section.sectionA'),
doSectionB: Ember.Router.transitionTo('root.section.sectionB'),
connectOutlets: function(router, event) {
router.get('applicationController').connectOutlet('section');
},
index: Ember.Route.extend({
route: '/'
}),
sectionA: App.SectionARoute.extend({
route: '/sectionA'
}),
sectionB: App.SectionBRoute.extend({
route: '/sectionB'
})
})
})
});
this is a basic ember routing example that doesn't update the url to /posts correct when there is a child route in posts with dynamic segments. all the other routes (including the dynamic segments) correctly update the url. if i take out the dynamic segment child route (called 'show', under 'posts') then it updates the url correctly. here's the fiddle code : http://jsfiddle.net/inconduit/NbPpM/3/
and to view fiddle in action where it updates the urls, look here: http://fiddle.jshell.net/inconduit/NbPpM/3/show/#
to summarize - when you click 'Posts' the url should update to show /posts , but it does not.
here's the javascript:
App = Ember.Application.create({
ready: function() {
App.initialize(App.Router.create({ enableLogging: true }));
}
});
App.Post = Ember.Object.extend({
title: null,
body: null
});
App.posts = [];
App.posts.pushObject(App.Post.create({id:'0', title: "Test post 1", body: "How awesome is Ember.js"}));
App.posts.pushObject(App.Post.create({id:'1', title: "Test post 2", body: "I love working on awesome projects"}));
App.posts.pushObject(App.Post.create({id:'2', title: "Test post 3", body: "I like cats"}));
App.ApplicationController = Ember.ObjectController.extend();
App.ApplicationView = Ember.View.extend({
templateName: "application_view"
});
App.PostsController = Ember.ArrayController.extend();
App.PostsView = Ember.View.extend({
templateName: 'posts_view'
});
App.PostController = Ember.ObjectController.extend();
App.PostView = Ember.View.extend({
templateName: 'post_view'
});
App.AboutController = Ember.ObjectController.extend();
App.AboutView = Ember.View.extend({
templateName: 'about_view'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
goToPostsIndex: Ember.Route.transitionTo('posts.index'),
goToAbout: Ember.Route.transitionTo('about'),
goToShowPost: Ember.Route.transitionTo('posts.index.show'),
index: Ember.Route.extend({
route: '/',
redirectsTo: "posts.index"
}),
posts: Ember.Route.extend({
route: '/posts',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('posts', App.posts);
},
index: Ember.Route.extend({
route: '/',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('posts', App.posts);
},
show: Ember.Route.extend({
route: '/:post_id',
connectOutlets: function (router, post) {
router.get('postsController').connectOutlet('post', post);
},
deserialize: function(router, params) {
var id = params.post_id,
i = 0;
for (i = 0; i < App.posts.length; i += 1) {
if (App.posts[i].id === id) {
return App.posts[i];
}
}
},
serialize: function(router, context) {
var rtnVal = {},
id = context.get('id');
if (context) {
rtnVal = {post_id: id};
}
return rtnVal;
}
})
}),
}),
about: Ember.Route.extend({
route: '/about',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('about');
}
})
})
});
`
Only leaf routes are meant to be navigable (i.e. the reason posts.index wasn't navigable is that it had a child route).
http://jsfiddle.net/NbPpM/8/
I moved posts.index.show to posts.show -- the way it is here is a common pattern, at least in my experience.
I'm trying to get the Ember.js routing examples working.
I have a fiddle running pretty well with a posts example.
The routes update with the id of the post and display the correct item.
The only problem is if you load the page cold with the post url, it doesn't work (doesn't show anything in the posts view).
Any idea?
Here's the fiddle: http://jsfiddle.net/bdennyw/GzYtc/5/
and the fiddle with the full url
http://jsfiddle.net/bdennyw/GzYtc/5/show/#/posts/1
Thanks
Edit: Including the js code below:
$(function () {
App.initialize(App.Router.create());
});
window.App = Ember.Application.create();
App.Post = Ember.Object.extend({
title: null,
body: null
});
App.posts = [];
App.posts.pushObject(App.Post.create({id:'0', title: "Test post 1", body: "How awesome is Ember.js"}));
App.posts.pushObject(App.Post.create({id:'1', title: "Test post 2", body: "I love working on awesome projects"}));
App.posts.pushObject(App.Post.create({id:'2', title: "Test post 3", body: "I like cats"}));
App.ApplicationController = Ember.ObjectController.extend();
App.ApplicationView = Ember.View.extend({
templateName: "application_view"
});
App.PostsController = Ember.ArrayController.extend();
App.PostsView = Ember.View.extend({
templateName: 'posts_view'
});
App.PostController = Ember.ObjectController.extend();
App.PostView = Ember.View.extend({
templateName: 'post_view'
});
App.AboutController = Ember.ObjectController.extend();
App.AboutView = Ember.View.extend({
templateName: 'about_view'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
goToPostsIndex: Ember.State.transitionTo('posts.index'),
goToAbout: Ember.State.transitionTo('about'),
goToShowPost: Ember.State.transitionTo('posts.show'),
index: Ember.Route.extend({
route: '/',
redirectsTo: "posts.index"
}),
posts: Ember.Route.extend({
route: '/posts',
index: Ember.Route.extend({
route: '/',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('posts', App.posts);
}
}),
show: Ember.Route.extend({
route: '/:post_id',
connectOutlets: function (router, post) {
router.get('postsController').connectOutlet('post', post);
},
deserialize: function(router, params) {
var id = params.post_id,
i = 0;
for (i = 0; i < App.posts.length; i += 1) {
if (App.posts[i].id === id) {
return App.posts[i];
}
}
},
serialize: function(router, context) {
var rtnVal = {},
id = context.get('id');
if (context) {
rtnVal = {post_id: id};
}
return rtnVal;
},
}),
}),
about: Ember.Route.extend({
route: '/about',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('about');
}
})
})
});
By adding the enableLogging: true property to the router, you can see the routes taken by the router. So when loading the page, here is the trace:
STATEMANAGER: Entering root
Sending event 'navigateAway' to state root.
Sending event 'unroutePath' to state root.
Sending event 'routePath' to state root.
Entering root.posts
Sending event 'routePath' to state root.posts.
Entering root.posts.show
Sending event 'routePath' to state root.posts.show.
So It does'nt go through post.index which connect the outlet of your posts. So the view responsible of diplaying posts is not shown, and finally, the view responsible of displaying a post is not shown.
You could nest the show state as a child of the posts.index state, and it works, but I don't know if it's conceptually right.