url中的ember js'undefined'

时间:2014-05-08 09:35:04

标签: ember.js handlebars.js

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

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

我不知道为什么这个未定义来了......

提供帮助

我是新手

1 个答案:

答案 0 :(得分:0)

link-to期望模型对象作为其第二个参数,而不是id。

因此,您可能希望稍早加载myleavesapprovalrequests的模型 - 可能在您的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>

这与您目前的情况略有不同。如果不直接说话,很难知道应用程序的完整结构和流程。不过,我希望它有一些用处。