2014-03-27 58 views
0

我剛剛開始學習如何使用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] 
    } 
]; 

回答

1

什麼版本的灰燼您使用的是?因爲您正在使用1.0之前的語法來訪問Ember Data中的模型(請參閱https://github.com/emberjs/data/blob/master/TRANSITION.md)。嘗試

App.ViewRoute = Ember.Route.extend({ 
    model: function(params) { 
     return this.store.find('student', params.user_id); 
    } 
}); 

此外,您的Students模型的定義應該是單數。畢竟,你正在定義一個學生的班級。所以

App.Student = DS.Model.extend({ 
    first: DS.attr('string'), 
    last: DS.attr('string'), 
    classes: DS.hasMany('ClassGroup') 
}); 

不知道這是否會解決問題,但!

+0

我使用Ember v1.4.0。我改變了我的模型從商店返回。這保持了與以前相同的功能,沒有破壞任何東西,但它也沒有解決我遇到的刷新問題。我喜歡你的學生建議,所以我會改變我的模型爲「學生」(單數)。還有其他建議嗎? –