当我在 Emberjs 中使用 {{link-to}} 中的 id 刷新 url 时,子出口变为空
Child outlet goes empty when I refresh the url with id from {{link-to}} in Emberjs
我有一个奇怪的问题,每当我使用 id 刷新页面时,子出口就会变空。我有一个由 {{link-to}} 助手生成的列表。
<script type="text/x-handlebars" id="twod">
<div class="row">
<div class="span4">
<img src="/img/2DPipeline.jpg" />
</div>
<div class="span3">
<h4>People with Roles</h4>
<div class="row">
<div class="span2">
<ul>
{{#each item in model}}
<li>{{#link-to 'twoduser' item}}{{item.firstname}} {{/link-to}}</li>
{{/each}}
</ul>
</div>
<div class="row">
<div class="span">
{{outlet}}
</div>
</div>
</div>
</div>
</script>
这是双用户模板,
<script type="text/x-handlebars" data-template-name="twoduser">
<div class="row">
<div class="span3">
Full Name: {{firstname}}{{lastname}}
EMail: {{email}}
</div>
</div>
</script>
应用.js,
App.Router.map(function() {
this.resource('twod', function() {
this.resource('twoduser', {
path : ':user_id'
});
});
this.resource('threed');
});
App.TwoduserRoute = Ember.Route.extend({
model : function(params) {
return App.Twod.findBy(params.user_id);
}
});
App.Twod.reopenClass({
findAll : function() {
return new Ember.RSVP.Promise(function(resolve, reject) {
$.getJSON("http://pioneerdev.us/users/index", function(data) {
var result = data.users.map(function(row) {
return App.Twod.create(row);
});
resolve(result);
}).fail(reject);
});
},
findBy : function(user_id) {
var user = App.Twod.create();
$.getJSON("http://ankur.local/users/byId/" + user_id, function(data) {
user.setProperties(data.user);
});
user.set("user_id", user_id);
return user;
}
});
App.TwodRoute = Ember.Route.extend({
model : function() {
return App.Twod.findAll();
}
});
单独选择每个都可以正常工作并填充子插座,但是当我刷新它时,它会变为空白。
任何想法可能导致问题的原因?
我可以看到两个可能的问题。
首先是您的 URL 在 findAll
和 findBy
之间不同。 这是故意的吗?
第二种是findAll
返回一个余烬承诺(Ember.RSVP.Promise
),但findBy
没有。
[更新]:基于评论中的JSBin:http://jsbin.com/iPUxuJU/1/
这里的问题是 API 端点在user
响应中返回一个数组。 它目前看起来像这样:
{user : [{ ... }] }
理想情况下,它看起来像这样:
{user : {....} }
您可以更改 API 终结点,也可以更新代码以从该数组中提取第一个元素。 而不是:
user.setProperties(data.user);
你可以做:
user.setProperties(data.user[0]);
这是一个修改后的JSBin: http://jsbin.com/oquBoMA/1#/twod/2
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 使用php或javascript从facebook相册URL中删除多余的部分
- Angular JS IE9 Hashbang url rewriting
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 直接下载文件,而不是从window.open(url)
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 通过js在新选项卡中有条件地打开url
- CKFinder 3为所选文件返回错误的URL
- 如何获取不属于我项目的上一页的URL
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 在URL中传递JS对象
- 将纯文本URL转换为可单击链接
- Javascript html每点击一次就会更改url
- 以角度管理动态URL
- Mathias URL shortener
- 如何有效地将游戏数据存储在URL查询字符串中
- 使用带括号的图像URL作为jQuery的背景
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 传递包含'%的参数'在URL中
- 当我在 Emberjs 中使用 {{link-to}} 中的 id 刷新 url 时,子出口变为空