我剛剛開始學習如何使用Ember.js作爲我公司即將開始的項目。我遇到的問題是,當我刷新頁面時,該應用程序不會自動爲我構建頁面。Ember.js建立刷新頁面
它在大多數頁面上工作,但我現在有一個頁面在URL中有一個變量失敗。這看起來好像是一個常見問題,但我找不到這個問題的答案。
這裏是我的代碼:
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// Router Map
App.Router.map(function() {
this.resource("people", function() {
this.route('information');
});
this.resource("view", {path: '/view/:user_id'}, function() {
});
});
App.ViewRoute = Ember.Route.extend({
model: function(params) {
return App.Students.find(params.user_id);
}
});
App.PeopleRoute = Ember.Route.extend({
setupController: function(controller, model){
this._super(controller, model);
controller.set('students', this.store.find('Students'));
}
});
App.PeopleInformationRoute = Ember.Route.extend({
setupController: function(controller, model){
this._super(controller, model);
controller.set('students', this.store.find('Students'));
}
});
這裏是我的HTML:
<script type="text/x-handlebars">
<h1>Ember Testing Demo</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h2>Index</h2>
{{#linkTo "people"}}People{{/linkTo}}
</script>
<script type="text/x-handlebars" id="view">
<h4>Student Data</h4>
<p>{{first}} {{last}}</p>
Edit First Name: {{input type="text" value=first}}<br />
Edit Last Name: {{input type="text" value=last}}<br /><br />
{{#linkTo "people"}}Done{{/linkTo}}
</script>
<script type="text/x-handlebars" id="people">
<h2>People</h3>
<ul>
{{#each students}}
{{#linkTo "view" this}}<li>{{first}} {{last}}</li>{{/linkTo}}
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" id="people/index">
<h3>No Student Selected</h3>
</script>
<script type="text/x-handlebars" id="people/information">
<h3>Student Information</h3>
</script>
我明白,我有一大堆的事發生的。我只是在做一些事情,以更好地理解路線和網點目前的工作方式。這是沒有實際用途的。
問題與我在路由器中的「查看」資源發生。它無法從URL中的「/ view/11」或任何其他用戶標識中構建頁面。它不會給我一個錯誤;相反,我得到一個空白頁面。如果我嘗試去純粹的「/ view」,但是我確實得到一個錯誤。
讓我知道我是否遺漏了任何東西。
編輯:
下面是我使用的夾具:
App.ClassGroup = DS.Model.extend({
className: DS.attr('string'),
isActive: DS.attr('number'),
students: DS.hasMany('Students',{async:true}),
selected: DS.hasMany('Students',{async:true})
});
App.ClassGroup.FIXTURES = [
{
id: 123,
className: 'Class 1',
isActive: 1,
students: [11, 22, 33, 44, 55],
selected: [11, 22, 33, 44, 55]
},
{
id: 456,
className: 'Class 2',
isActive: 0,
students: [66, 77, 88, 99],
selected: [66, 88, 99]
},
{
id: 789,
className: 'Group 1',
isActive: 0,
students: [77, 22],
selected: []
}
];
App.Students = DS.Model.extend({
first: DS.attr('string'),
last: DS.attr('string'),
classes: DS.hasMany('ClassGroup')
});
App.Students.FIXTURES = [
{
id: 11,
first: 'Student',
last: 'One',
classes: [123]
},
{
id: 22,
first: 'Student',
last: 'Two',
classes: [123, 789]
},
{
id: 33,
first: 'Student',
last: 'Three',
classes: [123]
},
{
id: 44,
first: 'Student',
last: 'Four',
classes: [123]
},
{
id: 55,
first: 'Student',
last: 'Five',
classes: [123]
},
{
id: 66,
first: 'Student',
last: 'Six',
classes: [456]
},
{
id: 77,
first: 'Student',
last: 'Seven',
classes: [456, 789]
},
{
id: 88,
first: 'Student',
last: 'Eight',
classes: [456]
},
{
id: 99,
first: 'Student',
last: 'Nine',
classes: [456]
}
];
我使用Ember v1.4.0。我改變了我的模型從商店返回。這保持了與以前相同的功能,沒有破壞任何東西,但它也沒有解決我遇到的刷新問題。我喜歡你的學生建議,所以我會改變我的模型爲「學生」(單數)。還有其他建議嗎? –