url中的ember js“未定义”

Question

这是我的 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}}

这是我的 ember js 代码

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"});
  });
});

我通过下面的代码带来数据

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

但是当我点击菜单链接“myleaves”或“批准请求”时

我的网址是这样的

http://localhost:8888/Leave.html#/undefined/myleaves/undefined

我不知道为什么这个 undefined 会来..

请帮忙

我是新手

Answer 1

link-to 需要一个模型对象作为它的第二个参数，而不是一个 id。

因此，您可能希望更早地加载 myleaves 和 approvalrequests 的模型 — 可能在您的 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
    });
  }
});

模板变成：

<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>

编辑

根据您的模型代码，以及您的请求实际上并不依赖于 ID 的事实，我建议如下：

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');
  }
});

你的模板变成：

<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>

这与您目前拥有的有点不同。如果不直接说话，很难了解应用程序的完整结构和流程。不过，我希望它有点用处。