2014-03-13 53 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