ember js 'undefined' in url - ember.js

Question

This is my menu bar code in html
<script type="text/x-handlebars" data-template-name="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "myleaves" 1255 action="myleavesinfolist"}}My Leave{{/link-to}}</li>
<li>{{#link-to "approvalrequests" 1255 action="appreqlist"}}Approval Requests{{/link-to}}</li>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{model.userName}}</font></p>
</ul>
</div>
{{outlet}}
Here is my ember js code
App.Router.map(function () {
this.resource("signin", {path: "/"});
this.resource("links", {path: "/:id"},
function () {this.resource("myleaves",path: "/myleaves/:id"});
this.resource("approvalrequests", {path: "/appreq/:id"});
});
});
am bringing data by below code
App.LinksController = Ember.ObjectController.extend({
actions: {
myleavesinfolist: function () {
rdata = $.ajax({
type: "POST",
url: "/myleaves",
dataType: "json",
async: false
}).responseJSON;
this.transitionToRoute("myleaves", rdata);
} //myleavesinfolist
,
appreqlist: function () {
rdata = $.ajax({
type: "POST",
url: "/aprreq",
dataType: "json",
async: false
}).responseJSON;
final = filterData(rdata);
console.log(final);
this.transitionToRoute("approvalrequests", final);
} //appreqlist
} //actions
}); //controller
but when i click on menu link "myleaves " or "approval requests"
my url is like
http://localhost:8888/Leave.html#/undefined/myleaves/undefined
i dont knw why this undefined is coming..
PLease help
am a newbie

Answer 1

link-to expects a model object as its second argument, rather than an id.
So you’ll likely want to load the models for myleaves and approvalrequests earlier on—perhaps in your ApplicationRoute:
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
myLeaves: this.store.find('leaves'), // or however you fetch model data
approvalRequests: this.store.find('approval-request') // ditto
});
}
});
And the template becomes:
<script type="text/x-handlebars" data-template-name="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "myleaves" myLeaves action="myleavesinfolist"}}My Leaves{{/link-to}}</li>
<li>{{#link-to "approvalrequests" approvalRequests action="appreqlist"}}Approval Requests{{/link-to}}</li>
</ul>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{model.userName}}</font></p>
</div>
{{outlet}}
</script>
EDIT
Based on your model code—and the fact that your requests don’t actually depend on the ID—I’d suggest the following:
App.Router.map(function () {
this.resource('signin', { path: '/' });
this.resource('links', { path: '/links' }, function() {
this.resource('my-leaves', { path: '/myleaves' });
this.resource('approval-requests', { path: '/appreq' });
});
});
function getJSONByPost(url) {
return $.ajax({
url: url,
type: 'POST',
dataType: 'json'
});
}
App.MyLeavesRoute = Ember.Route.extend({
model: function() {
return getJSONByPost('/myleaves');
}
});
App.ApprovalRequestsRoute = Ember.Route.extend({
model: function() {
return getJSONByPost('/aprreq');
}
});
Your template becomes:
<script type="text/x-handlebars" id="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "my-leaves"}}My Leaves{{/link-to}}</li>
<li>{{#link-to "approval-requests"}}Approval Requests{{/link-to}}</li>
</ul>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{userName}}</font></p>
</div>
{{outlet}}
</script>
This is a bit of a departure from what you currently have. It’s hard to know the full structure and flow of your app without speaking directly. Nevertheless, I hope it’s of some use.