2014-03-13 96 views
1

我建立具有以下代碼的應用程序:Emberjs:如何刷新模型後父模板創建

路線:

App.Router.map(function() { 
    this.resource('gradebooks', function() { 
    this.resource('gradebook', { path: ':gradebook_id' }); 
    }); 
}); 

App.IndexRoute = Em.Route.extend({ 
    redirect: function() { 
    this.transitionTo('gradebooks'); 
    } 
}) 

App.GradebooksRoute = Em.Route.extend({ 
    setupController: function(controller, model) { 
    Em.$.getJSON('/data/gradebooks/get', function(data) { 
     controller.set('model', data); 
    }); 
    } 
}); 

App.GradebookRoute = Em.Route.extend({ 
    model: function(params) { 
    var id = params.gradebook_id; 
    return Em.$.getJSON('/data/gradebooks/get/' + id); 
    } 
}) 

控制器:

App.GradebooksController = Em.ArrayController.extend({ 
    isActive: false, 
    actions: { 
    createGradebook: function(newTitle) { 
     var self = this; 
     if(newTitle.trim()) { 
     Em.$.get('/data/gradebooks/add/' + newTitle, {}, function(json) { 
      Em.$('#create-gradebook-modal').modal('hide').find('input').val(''); 
      self.transitionToRoute('gradebook', json.id); 
     }, 'json'); 
     } 
    } 
    } 
}); 

模板(學分表.hbs):

<div class="sidebar"> 
    <div class="btn-container"> 
    <button class="btn btn-block btn-info" data-toggle="modal" data-target="#create-gradebook-modal"> 
     <i class="fa fa-book"></i> 
     Create Gradebook 
    </button> 
    </div> 

    <ul> 
    {{#each}} 

    <li {{bind-attr class="isActive:active"}}> 
     {{#link-to "gradebook" _id}} 
     {{title}} 
     {{/link-to}} 
    </li> 

    {{/each}} 
    </ul> 
</div> 

<div class="content"> 
    <div class="container-fluid"> 
    {{outlet}} 
    </div> 
</div> 

模板(gradebook.hbs):

<h1>{{title}} <small>{{_id}}</small></h1> 

<div class="btn-container"> 
    <button class="btn btn-default"><i class="fa fa-pencil"></i> Rename</button> 
    <button class="btn btn-danger"><i class="fa fa-trash-o"></i> Trash</button> 
</div> 

什麼我遇到的麻煩是下GradebooksController.actions.createGradebook,我送創建模型的請求,然後我轉移到我剛剛創建的成績冊。創建和轉換工作得很好,但我希望邊欄(gradebooks.hbs)顯示新創建的成績冊。

我認爲這與更新GradebooksRoute模型有關。如何在創建成績簿後再次從服務器獲取模型。

+0

創建成績簿後,把它推到學分表的內容。 – fanta

回答

3

爲了詳細說明@芬達的評論,你會想要做這樣的事情:

App.GradebooksController = Em.ArrayController.extend({ 
    isActive: false, 
    actions: { 
    createGradebook: function(newTitle) { 
     var self = this; 
     if(newTitle.trim()) { 
     var gradebook = Em.$.getJSON('/data/gradebooks/add/' + newTitle, {}, function(json) { 
      Em.$('#create-gradebook-modal').modal('hide').find('input').val(''); 
      self.transitionToRoute('gradebook', json.id); 
     }, 'json'); 
     self.get('content').pushObject(gradebook); 
     } 
    } 
    } 
}); 
+0

除了一些小修改之外,它的作品很棒。 'this.get('content')。pushObject(gradebook);'需要'self.get ...'並在'getJSON'回調中。 – Kpaekn

+0

啊良好的捕獲 - 修復它。 – chopper