EMBER直接路由URL访问不加载数据 [英] EMBER direct route URL access dont load data
问题描述
我从浏览器直接访问我的网址时遇到问题，它不会加载我的单数信息. 例如:/index.html#/posts/10052308
但是当我访问/index.html#/posts然后单击我的一篇文章时，它可以工作，我的URL更改为/index.html#/posts/10052308并可以工作，但是如果我直接在此页面刷新url不再起作用.
我正在从API(JSON)加载数据.
在我的JS中:
App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { path: ':id' });
});
});
App.Posts = Ember.Object.extend();
App.Posts.reopenClass({
allPosts: [],
all: function(page, sort, order){
this.allPosts = [];
$.ajax({
url: 'http://intense-bastion-3210.herokuapp.com/run_sessions.json',
dataType: 'json',
data: "page=" + page + "&sort_by=" + sort + "&order=" + order,
context: this,
success: function(response){
console.log(response);
response.run_sessions.forEach(function(posts){
this.allPosts.addObject(App.Posts.create(posts))
}, this)
}
})
postsList = this.allPosts;
return this.allPosts;
}
});
App.PostsRoute = Ember.Route.extend({
model: function() {
var sortColumn = Ember.computed.alias('parentController.sortedColumn');
return App.Posts.all("1", "id", "desc");
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.id);
}
});
在我的html中
<script type="text/x-handlebars" id="posts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<table class='table'>
<thead>
<tr><th>Runs</th></tr>
</thead>
{{#each model}}
<tr><td>
{{#link-to 'post' this}}{{id}}{{/link-to}}
</td></tr>
{{/each}}
</table>
</div>
<div class="span9">
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="post">
<h3>ID: {{id}}</h3>
<h3>Sport TYPE: {{sport_type_id}}</h3>
<h3>Start Time: {{start_time}}</h3>
<h3>End Time: {{end_time}}</h3>
<h3>Duration: {{duration}}</h3>
<h3>Distance: {{distance}}</h3>
<h3>Encoded Trace: {{encoded_trace}}</h3>
<hr>
</script>
这是当我打开/index.html#/posts/并单击任何帖子时 http://i.stack.imgur.com/Hryge.png
这是当我刷新页面或直接访问时 http://i.stack.imgur.com/ht8Bc.png
请问有人可以帮我吗?
您的post路由存在问题，它引用的是看似不存在的变量.
提供了使用链接到时它起作用的原因是模型，因此它跳过了模型钩子，但是刷新页面时，它不再具有这种奢侈感，必须从模型钩子中获取模型. /p>
我个人感到很惊讶，因为它根本无法渲染任何东西，我想它会炸毁并说出Reference error posts is not defined.
您可能应该按照以下方式做些事情
App.PostRoute = Ember.Route.extend({
model: function(params) {
return App.Posts.allPosts.findBy('id', params.id);
}
});
或
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('posts').findBy('id', params.id);
}
});
这两个模型挂钩均取决于实际上具有属性id的对象以及使用:id作为动态段的路由器.
App.Router.map(function(){
this.resource('posts', function(){
this.resource('post', {path:'/:id'});
});
});
这是一个简单的示例，其中包含所有必需的元素
http://emberjs.jsbin.com/OxIDiVU/151/edit
i've a problem when i access my url direct from browser, it dosnt load my singular post infos. example: /index.html#/posts/10052308
but it works when i access /index.html#/posts and then click in one of my posts, my url changes to /index.html#/posts/10052308 and works, but if i refresh the page directly on this url it dosnt work any more.
I'm loading data from a API (JSON).
In my JS:
App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { path: ':id' });
});
});
App.Posts = Ember.Object.extend();
App.Posts.reopenClass({
allPosts: [],
all: function(page, sort, order){
this.allPosts = [];
$.ajax({
url: 'http://intense-bastion-3210.herokuapp.com/run_sessions.json',
dataType: 'json',
data: "page=" + page + "&sort_by=" + sort + "&order=" + order,
context: this,
success: function(response){
console.log(response);
response.run_sessions.forEach(function(posts){
this.allPosts.addObject(App.Posts.create(posts))
}, this)
}
})
postsList = this.allPosts;
return this.allPosts;
}
});
App.PostsRoute = Ember.Route.extend({
model: function() {
var sortColumn = Ember.computed.alias('parentController.sortedColumn');
return App.Posts.all("1", "id", "desc");
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.id);
}
});
IN MY html
<script type="text/x-handlebars" id="posts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<table class='table'>
<thead>
<tr><th>Runs</th></tr>
</thead>
{{#each model}}
<tr><td>
{{#link-to 'post' this}}{{id}}{{/link-to}}
</td></tr>
{{/each}}
</table>
</div>
<div class="span9">
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="post">
<h3>ID: {{id}}</h3>
<h3>Sport TYPE: {{sport_type_id}}</h3>
<h3>Start Time: {{start_time}}</h3>
<h3>End Time: {{end_time}}</h3>
<h3>Duration: {{duration}}</h3>
<h3>Distance: {{distance}}</h3>
<h3>Encoded Trace: {{encoded_trace}}</h3>
<hr>
</script>
This is when i open /index.html#/posts/ and click over any post http://i.stack.imgur.com/Hryge.png
This is when i refresh the page, or do direct acess http://i.stack.imgur.com/ht8Bc.png
Can anyone help me, please?
Your post route has an issue, it's referencing what looks to be a non-existent variable.
The reason it works when you use the link-to is the model is provided, so it skips the model hook, but when you refresh the page it no longer has that luxury and must fetch the model from the model hook.
Personally I'm surprised it renders anything at all, I would guess it would blow up and say Reference error posts is not defined.
You probably should do something along these lines
App.PostRoute = Ember.Route.extend({
model: function(params) {
return App.Posts.allPosts.findBy('id', params.id);
}
});
or
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('posts').findBy('id', params.id);
}
});
Both of those model hooks depend on the objects actually having the property id on them and your router using :id as the dynamic segment.
App.Router.map(function(){
this.resource('posts', function(){
this.resource('post', {path:'/:id'});
});
});
Here's a simple example that has all of the required elements
http://emberjs.jsbin.com/OxIDiVU/151/edit
这篇关于EMBER直接路由URL访问不加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
